- 首页
- 其他开发
- ng-click 函数在第二次单击(或取消单击)时进行评估
ng-click 函数在第二次单击(或取消单击)时进行评估
[英] ng-click function evaluating on second click (or, unclick)
本文介绍了ng-click 函数在第二次单击(或取消单击)时进行评估的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
--- 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();"/>{{主要的}}
<div class="menuGrid"><input type="text" class="form-control input-sm"ng-model="mainOtherText" ng-show="selectedMain == '其他'"placeholder="在此处输入其他"/>
测试:{{mainDish}}
--- JS ---$scope.setDish = function(){如果($scope.selectedMain == '其他'){$scope.mainDish = $scope.mainOtherText;}别的 {$scope.mainDish = $scope.selectedMain;}};
我有一个用于选择菜单项的单选按钮网格，最后一个是其他".选择其他"时，会在用户输入另一个项目的位置显示一个文本框.我使用 ng-click 函数的目标是在选择其他"时使用另一个文本框中的值更新变量 mainDish.
此代码有效，但是出现的问题在于变量 mainDish 仅在单选按钮未选中时更新.
示例 - 第一次单击按钮时，它不会影响变量 mainDish，但是当单击另一个按钮时，mainDish 更新为单击的第一个按钮的值.
关于为什么会发生这种情况或我可以解决它的方法有什么想法吗?
根据评论，我将更多地解释我的代码.我有一个菜单，一个用户从中挑选的饭菜清单.该列表由 ng-repeat 命令从一系列膳食中抓取并为每个膳食创建一个单选按钮填充.数组中的最后一项是名为其他"的项目.选择其他"时，会出现一个文本框，以便用户可以输入自己的菜肴.
我想要的是:我希望在选择其他"单选框时为变量 mainDish 分配其他"文本框的值.对于所有其他项目，mainDish 的值只是单选按钮的值，但其他"并非如此.
我所拥有的:它有效！但以一种奇怪的方式.变量 mainDish 仅在取消选择单选按钮时更新.每次单击一个新的单选按钮时，变量 mainDish 都会被分配上一个按钮的值.这是我需要帮助解决的问题.
解决方案
问题是 ng-click 在更新范围的 ng-model 代码之前触发.如果您将其更改为使用 ng-change，则会修复它.您还需要在文本框中添加 ng-change 以在用户键入时更新范围.
<div class="menuGrid"><input type="text" class="form-control input-sm"ng-model="mainOtherText"ng-show="selectedMain == '其他'"ng-change="setDish();"placeholder="在此处输入其他"/>
测试:{{mainDish}}
这是一个工作示例:http://jsfiddle.net/bnzwx94b/2/
--- 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.
解决方案
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/
这篇关于ng-click 函数在第二次单击(或取消单击)时进行评估的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
