ng-click函数评估第二次单击(或取消单击) [英] 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;
    }
};

我有一个用于选择菜单项的单选按钮网格，最后一个是其他".当其他"被选择时，文本框示出了在用户输入的另一个项目.我使用ng-click功能的目标是在选择其他"时使用另一个文本框中的值更新变量mainDish.

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.

此代码有效，但是，出现问题在于，仅当未选中单选按钮时，变量mainDish才会更新.

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

示例-第一次单击一个按钮时，它对变量mainDish没有任何影响，但是当另一个按钮被单击时，mainDish将更新为第一个被单击的按钮的值.

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?

根据评论，我将进一步解释我的代码.我有一个菜单，其中列出了用户可以选择的餐点.该列表由ng-repeat命令填充，这些命令从一系列膳食中获取并为每个膳食创建一个单选按钮.数组中的最后一项是名为其他"的项.选择其他"后，将出现一个文本框，以便用户输入自己的菜.

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.

我想什么:我想选择其他"无线电框当可变mainDish要分配的其他"的文本框的值.对于所有其他项目，mainDish的值只是单选按钮的值，而其他"则不是这种情况.

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

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

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.

推荐答案

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

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>

这是一个有效的示例: http://jsfiddle.net/bnzwx94b/2/

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

这篇关于ng-click函数评估第二次单击(或取消单击)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！