第二次点击(或取消点击)时评估的 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;
}
};
我有一个用于选择菜单项的单选按钮网格,最后一个是 'Other'。选择 'Other' 时,会显示一个文本框,用户可以在其中输入另一个项目。我使用 ng-click 函数的目标是在选择 'Other' 时用另一个文本框中的值更新变量 mainDish。
此代码有效,但是,出现的问题是变量 mainDish 仅在取消选择单选按钮时更新。
示例 - 第一次单击按钮时,它不会影响变量 mainDish,但是当单击另一个按钮时,mainDish 将更新为单击的第一个按钮的值。
关于为什么会发生这种情况或我可以解决它的方法有什么想法吗?
编辑:
根据评论,我将更多地解释我的代码。我有一个菜单,用户可以从中选择的餐点列表。该列表由 ng-repeat 命令填充,该命令从一系列食物中抓取并为每个食物创建一个单选按钮。数组中的最后一项是名为 'Other' 的项。选择 'Other' 时,会出现一个文本框,用户可以输入自己的菜品。
我想要的:我希望在选中 'Other' 单选框时为变量 mainDish 分配 'Other' 文本框的值。对于所有其他项目,mainDish 的值只是单选按钮的值,但 'Other' 不是这种情况。
我所拥有的:有效!但是以一种奇怪的方式。变量 mainDish 仅在取消选择单选按钮时更新。每次单击新的单选按钮时,都会为变量 mainDish 分配上一个按钮的值。这是我需要帮助解决的问题。
问题是 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/
--- 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;
}
};
我有一个用于选择菜单项的单选按钮网格,最后一个是 'Other'。选择 'Other' 时,会显示一个文本框,用户可以在其中输入另一个项目。我使用 ng-click 函数的目标是在选择 'Other' 时用另一个文本框中的值更新变量 mainDish。
此代码有效,但是,出现的问题是变量 mainDish 仅在取消选择单选按钮时更新。
示例 - 第一次单击按钮时,它不会影响变量 mainDish,但是当单击另一个按钮时,mainDish 将更新为单击的第一个按钮的值。
关于为什么会发生这种情况或我可以解决它的方法有什么想法吗?
编辑: 根据评论,我将更多地解释我的代码。我有一个菜单,用户可以从中选择的餐点列表。该列表由 ng-repeat 命令填充,该命令从一系列食物中抓取并为每个食物创建一个单选按钮。数组中的最后一项是名为 'Other' 的项。选择 'Other' 时,会出现一个文本框,用户可以输入自己的菜品。
我想要的:我希望在选中 'Other' 单选框时为变量 mainDish 分配 'Other' 文本框的值。对于所有其他项目,mainDish 的值只是单选按钮的值,但 'Other' 不是这种情况。
我所拥有的:有效!但是以一种奇怪的方式。变量 mainDish 仅在取消选择单选按钮时更新。每次单击新的单选按钮时,都会为变量 mainDish 分配上一个按钮的值。这是我需要帮助解决的问题。
问题是 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/