angularjs - 第二次点击(或取消点击)时评估的 ng-click 函数

Question

--- 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;
    }
};

我有一个用于选择菜单项的单选按钮网格，最后一个是“其他”。选择“其他”时，会显示一个文本框，用户可以在其中输入另一个项目。我使用 ng-click 函数的目标是在选择“其他”时使用另一个文本框中的值更新变量 mainDish。

此代码有效，但是，出现的问题是变量 mainDish 仅在取消选择单选按钮时更新。

示例 - 第一次单击按钮时，它不会影响变量 mainDish，但是当单击另一个按钮时，mainDish 将更新为单击的第一个按钮的值。

关于为什么会发生这种情况或我可以解决它的方法有什么想法吗？

编辑:根据评论，我将更多地解释我的代码。我有一个菜单，用户可以从中选择的餐点列表。该列表由 ng-repeat 命令填充，该命令从一系列食物中抓取并为每个食物创建一个单选按钮。数组中的最后一项是名为“其他”的项目。选择“其他”时，会出现一个文本框，以便用户可以输入自己的菜肴。

我想要的:我希望在选择“其他”单选框时为变量 mainDish 分配“其他”文本框的值。对于所有其他项目，mainDish 的值只是单选按钮的值，但“其他”不是这种情况。

我所拥有的:有效!但是以一种奇怪的方式。变量 mainDish 仅在取消选择单选按钮时更新。每次单击新的单选按钮时，都会为变量 mainDish 分配上一个按钮的值。这是我需要帮助解决的问题。

Answer 1

问题是 ng-click 在更新范围的 ng-model 代码之前触发。如果您将其更改为使用 ng-change，这将修复它。您还需要将 ng-change 添加到您的文本框以在用户键入时更新范围。

<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>

这是一个工作示例:http://jsfiddle.net/bnzwx94b/2/