Question

当我在角度中使用单选按钮时，我发生了两个问题。

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

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

以下是摘要：

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 每个文档**

将给定表达式绑定到<option>或input[radio]的值，因此，当选择元素时，该元素的ngModel是设置为绑定值。

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

当用户刷新页面或第一次访问页面时，我想要默认值选择“All（）”选项（我已经设置了checked属性，但默认设置仍然不存在）

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

当我点击“全部（）”单选按钮时，它会显示所有列表项（应该如此）。当我单击另一个按钮来过滤另一个字符串时，会出现问题;问题是当我再次点击“全部（）”时，过滤器似乎忽略了“全部（）”按钮被完全选中。

问题似乎与你的范围有关。在重复单选按钮时，您可以在selectedCandy范围内定位$parent（这是正确的，因为您的控制器范围高于转发器范围）。

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

只需从“全部”广播中删除$parent。

带有过滤器的单选按钮，在角度行为中使用ng-repeat意外

2 个答案: