Link to home
Start Free TrialLog in
Avatar of brianmfalls
brianmfallsFlag for United States of America

asked on

How to pass a value to a Modal form and manage the output of form select options on said form, angularJS Style!

I have a simple single page application with some data output on it.  If a user clicks on the USERNAME, the changeABuyer function initiates a modal form which transitions in.  The modal form contains a form select with all available USERNAMES.

What I would like to learn is two fold:
A: Pass the USERNAME that the user clicks to the 'changeAUserModal' modal form, and OMIT USERNAME from Select Options of the changeAUserModal Modal Form
B: Pass the USERNAME that the user clicks to the 'changeAUserModal' modal form, , and tag USERNAME as 'SELECTED' in the Select Options of the changeAUserModal Modal Form



USERNAME Data Output within SPA Index:
ow="fsID" ng-repeat="f in currentRulesF" ng-model="fedTable" ng-if="f.USERNAME != 'FAILURE'">
    <td ng-click="changeABuyer($index)" class="pointer">{{f.USERNAME}}</td>
    <td ng-click="changeARange($index)" class="pointer">{{f.LOW_DOLLAR}} - {{f.HIGH_DOLLAR}}</td>
    <td>
        <button class="btn btn-primary" id="removeRule" type="button" ng-click="removeRule($index)">
            <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Rule
        </button>
    </td>
</tr>

Open in new window


changeABuyer Function within controller.js
ope.changeABuyer = function(index) {
    $scope.changeIndex = index;
    $scope.BuyerDD = "";
    $('#changeAUserModal').modal('show');
}

Open in new window


changeAUserModal Modal Form within SPA Index:
<div class="modal fade" role="dialog" id="changeAUserModal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" aira-hidden="true">×</button>
                <h3>Change A Buyer</h3>
            </div>
            <div class="modal-body">
                <select ng-model="BuyerChangeDD" id="BuyerChangeDD" ng-options="aBuyer.NAME for aBuyer in buyerList"></select>
            </div>
            <div class="modal-footer">
                <a class="btn btn-primary" ng-click="BuyerChanged(BuyerChangeDD)" type="submit">Change</a>
                <a href="#" class="btn" data-dismiss="modal">Cancel</a>
            </div>
        </div>
    </div>
    <button ng-show="changesMade" type="button" class="btn btn-default" ng-click="saveRules()">Save Changes</button>
</div>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of brianmfalls
brianmfalls
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of brianmfalls

ASKER

I suppose half of a solution is better than no solution.