ng-click function evaluating on second click (or, unclick)

问题

--- HTML ---

<div class="btn-group menuSection">
    <div class="menuGrid" ng-repeat="main in mains">
        <button type="button" class="btn btn-default btn-sm btn-block"
            ng-value="main" btn-radio="main" ng-model="$parent.selectedMain" 
            ng-click="setDish();"/>
        {{main}}
    </div>
    <div class="menuGrid">
        <input type="text" class="form-control input-sm" 
            ng-model="mainOtherText" ng-show="selectedMain == 'Other'" 
            placeholder="enter other here"/>
    </div>
    test : {{mainDish}}
</div>


--- JS ---

$scope.setDish = function(){
    if ($scope.selectedMain == 'Other') {
        $scope.mainDish = $scope.mainOtherText;
    } 
    else {
       $scope.mainDish = $scope.selectedMain;
    }
};

I have a grid of radio buttons for selecting menu items, the last of which is 'Other'. When 'Other' is selected, a textbox shows up where the user inputs another item. My goal with the ng-click function is to update the variable mainDish with the value in the other textbox when 'Other' is selected.

This code works, however, the problem arises in that the variable mainDish only updates when the radio button is unselected.

Example - when a button is first clicked, it will have no affect on the variable mainDish, but then when another button is clicked mainDish is updated to the value of the first button clicked.

Any ideas on to why this is happening or ways I could fix it?

EDIT: As per comment, I'll explain my code a bit more. I have a menu, a list of meals that the user picks from. This list is populated by the ng-repeat command grabbing from an array of meals and creating a radio button for each. The last item in the array is an item called 'Other'. When 'Other' is selected, a textbox appears so the user can input their own dish.

What I want: I want the variable mainDish to be assigned the value of the 'Other' textbox when the 'Other' radio box is selected. For all of the other items, the value of mainDish is just the value of the radio button, but this is not the case with 'Other'.

What I have: It works! But in an odd way. The variable mainDish is only updated when the radio button is deselected. Every time you click a new radio button, the variable mainDish gets assigned the value of the previous button. This is the problem I need help solving.

回答1:

The problem is that ng-click fires before the ng-model code that updates the scope. If you change it to use ng-change, that will fix it. You also need to add ng-change to your text box to update the scope as the user types.

<div class="btn-group menuSection">
    <div class="menuGrid" ng-repeat="main in mains">
        <input type="radio" name="dishes"
            class="btn btn-default btn-sm btn-block"
            ng-value="main"  
            ng-model="$parent.selectedMain" 
            ng-change="setDish();"/>
        {{main}}
    </div>
    <div class="menuGrid">
        <input type="text" class="form-control input-sm" 
            ng-model="mainOtherText" 
            ng-show="selectedMain == 'Other'" 
            ng-change="setDish();"
            placeholder="enter other here"/>
    </div>
    test : {{mainDish}}
</div>

Here is a working example: http://jsfiddle.net/bnzwx94b/2/

来源：https://stackoverflow.com/questions/32685522/ng-click-function-evaluating-on-second-click-or-unclick

标签

angularjs

angularjs-ng-click