具有ng-repeat的过滤器的单选按钮在角度行为方面出乎意料
[英]Radio buttons with filter using ng-repeat in angular behaving unexpectedly
问题描述
I have 2 issues that are occurring when i use radio buttons in angular. 
我在使用角度单选按钮时遇到2个问题。
I want the default value when the user refreshes the page or visits it for the first time to have the "All()" option selected (i have the checked property set but the default is still not there)
我希望用户刷新页面或第一次访问它时使用默认值，以选择“ All（）”选项（我已设置了选中的属性，但默认值仍不存在） When i click the "All()" radio button, it shows all the list items (as it should).
当我单击“ All（）”单选按钮时，它会显示所有列表项（应有）。 The problem occurs when i click another button to filter with another string; 当我单击另一个按钮以另一个字符串进行过滤时，会出现问题； the issue is when i click "All()" again, the filter seems to ignore that the "All()" button is selected altogether. 问题是当我再次单击“ All（）”时，过滤器似乎忽略了“ All（）”按钮被完全选中。
Basically I want the All() radio button to show unfiltered results. 基本上，我希望All（）单选按钮显示未过滤的结果。
Here is the plunker: 这是小矮人：
http://plnkr.co/edit/Bdaaq3cycKPt57h03LX7?p=preview http://plnkr.co/edit/Bdaaq3cycKPt57h03LX7?p=preview
<body ng-controller="candyController">
<input type="radio" value="" checked="checked" ng-model="$parent.selectedCandy" name="Candy" />(All)
<div data-ng-repeat="candy in candyList">
<input type="radio" value="{{candy.name}}" ng-model="$parent.selectedCandy" name="Candy" />
{{candy.name}}
</div>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Cost</th>
</tr>
<tr ng-repeat="candy in candyList | filter:{name:selectedCandy}">
<td>{{candy.name}}</td>
<td>{{candy.cost}}</td>
</tr>
</tbody>
</table>
</body>
</html>
and here is the controller 这是控制器
var app = angular.module('angularjs-starter', []);
app.controller('candyController', function($scope) {
$scope.candyList = [
{name:"lolipop", cost:10},
{name:"popsicle", cost:100},
{name:"ringpop", cost:50},
{name:"mint", cost:2},
{name:"chocolate", cost:85},
{name:"candycorn", cost:1}
];
});
2 个解决方案
解决方案1
2 2015-12-09 19:24:30
**ng-value Per Docs** **每文档ng值 **
Binds the given expression to the value of
<option>orinput[radio], so that when the element is selected, the ngModel of that element is set to the bound value.<option>或input[radio]，以便在选择元素时，将该元素的ngModel设置为绑定值。
Use ng-value instead of value attribute for make binding workable with respective ng-model on the radio button. 使用ng-value代替value属性可以使绑定与单选按钮上的相应ng-model一起使用。
Additionally the (All) radio button doesn't need $parent anotation. 此外， (All)单选按钮不需要$parent注释。 it should be directly used as ng-model="selectedCandy" , for inner radio button will need $parent because we want to refer controller scope variable. 它应该直接用作ng-model="selectedCandy" ，因为内部单选按钮将需要$parent因为我们要引用控制器作用域变量。
Markup 标记
<body ng-controller="candyController">
<input type="radio" ng-value="" checked="checked" ng-model="selectedCandy" name="Candy" />(All)
<div data-ng-repeat="candy in candyList">
<input type="radio" ng-value="candy.name" ng-model="$parent.selectedCandy" name="Candy" /> {{candy.name}}
</div>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Cost</th>
</tr>
<tr ng-repeat="candy in candyList | filter:{name:selectedCandy}">
<td>{{candy.name}}</td>
<td>{{candy.cost}}</td>
</tr>
</tbody>
</table>
</body>
解决方案2
2 已采纳 2015-12-09 19:27:46
I want the default value when the user refreshes the page or visits it for the first time to have the "All()" option selected (i have the checked property set but the default is still not there)
For this I would set the property on the scope in the controller when it is initiated: $scope.selectedCandy = ""; 为此，我将在启动控制器时在范围内设置属性： $scope.selectedCandy = "";
When i click the "All()" radio button, it shows all the list items (as it should).
The problem seems to be with your scope. 问题似乎出在您的范围之内。 You target selectedCandy on the $parent scope when repeating the radio buttons ( which is correct because your controller scope is above your repeater scope ). 重复单选按钮时，您可以在$parent范围内将selectedCandy定位为目标（ 这是正确的，因为您的控制器范围高于转发器范围 ）。
When you use $parent.selectedCandy on the radio outside of the repeater it is looking above its scope and not on the controller scope. 当您在转发器外部的无线电上使用$parent.selectedCandy时，它是在其作用域上方而不是在控制器作用域上。
Simply remove $parent from the "all" radio. 只需从“所有”收音机中删除$parent 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.