angular 中使用 ng-repeat 的带有过滤器的单选按钮出现意外行为

Question

我在 angular 中使用单选按钮时出现了 2 个问题。

我想要用户刷新页面或第一次访问它时的默认值来选择 "All()" 选项（我已选中属性设置但是默认值仍然不存在）
当我单击 "All()" 单选按钮时，它会显示所有列表项（应该如此）。当我单击另一个按钮以使用另一个字符串进行过滤时出现问题；问题是当我再次点击 "All()" 时，过滤器似乎忽略了 "All()" 按钮被完全选中。

基本上我希望 All() 单选按钮显示未过滤的结果。

这里是 plunker:

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>

这是控制器

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

Answer 1

**ng-value 根据文档**

Binds the given expression to the value of <option> or input[radio], so that when the element is selected, the ngModel of that element is set to the bound value.

使用 ng-value 而不是 value 属性使单选按钮上的相应 ng-model 可以绑定。

此外，(All) 单选按钮不需要 $parent 注释。它应该直接用作 ng-model="selectedCandy"，因为内部单选按钮需要 $parent 因为我们要引用控制器范围变量。

标记

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

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

为此，我会在控制器启动时在范围内设置属性：$scope.selectedCandy = "";

When i click the "All()" radio button, it shows all the list items (as it should). 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.

问题似乎出在你的示波器上。重复单选按钮时，您将 selectedCandy 定位到 $parent 范围（ 这是正确的，因为您的控制器范围高于您的转发器范围 ）。

当您在中继器外部的无线电上使用 $parent.selectedCandy 时，它会在其范围上方而不是控制器范围内查看。

只需从 "all" 收音机中删除 $parent。

angular 中使用 ng-repeat 的带有过滤器的单选按钮出现意外行为

Radio buttons with filter using ng-repeat in angular behaving unexpectedly

html

javascript

radio-button

angularjs

ng-repeat