采用NG-重演角工作不正常,带过滤器的单选按钮滤器、不正常、带过、单选

2023-09-13 05:16:48 作者:简遇而安

我,当我在角使用单选按钮正在发生的2个问题。

我要当用户刷新页面或访问它的第一次有所有()选项选中(我已经选中的属性设置,但默认情况下仍然不存在)

当我点击所有()单选按钮,它会显示所有列表项(因为它应该)。当我点击另一个按钮用另一个字符串来过滤出现的问题;问题是,当我点击全部()再次,过滤器似乎忽略了所有()按钮被完全选中。

基本上我想要的所有()单选按钮来筛选结果。

下面是plunker:

家里装了前置过滤器,三天两头就堵了,其实是对自家水质没有认清

http://plnkr.co/edit/Bdaaq3cycKPt57h03LX7?p=$p$ PVIEW

 <机身NG控制器=candyController>          <输入类型=电台值=检查=选中NG-模式=$ parent.selectedCandyNAME =糖果/>(全)                          < D​​IV数据-NG-重复=糖果candyList>            <输入类型=无线电VALUE ={{candy.name}}NG模型=$ parent.selectedCandyNAME =糖果/>                        {{candy.name}}        < / DIV>        <表>          <&TBODY GT;            &所述; TR>              <第i个姓名和LT; /第i              <第i成本和LT; /第i            < / TR>            < TR NG重复=糖果candyList |过滤器:{名称:selectedCandy}>              &所述; TD> {{candy.name}}&下; / TD>              &所述; TD> {{candy.cost}}&下; / TD>            < / TR>          < / TBODY>        < /表>      < /身体GT;    < / HTML> 

和这里是控制器

  VAR应用= angular.module('angularjs起动器',[]);app.controller('candyController',函数($范围){  $ scope.candyList = [    {名:棒棒糖,费用:10},    {名:冰棍,费用:100},    {名:ringpop,费用:50},    {名:薄荷,费用:2},    {名:巧克力,费用:85},    {名:candycorn,费用:1}  ];}); 

解决方案   

我想要的默认值,当用户刷新页面或访问它的第一次有所有()选项(我已选中的属性设置,但默认情况下仍然不存在)

有关这一点,启动的时候我都会设置该属性对控制器的范围: $ scope.selectedCandy =;

  

当我点击所有()单选按钮,它会显示所有列表项(因为它应该)。当我点击另一个按钮用另一个字符串来过滤出现的问题;问题是,当我点击全部()再次,过滤器似乎忽略了所有()按钮被完全选中。

这个问题似乎是与你的范围。你的目标 selectedCandy $父范围重复单选按钮(当的这是正确的,因为你的控制器范围上面是你的中继范围的)。

当您使用 $ parent.selectedCandy 在电台外的中​​继它上面寻找的范围,而不是在控制范围内。

只需删除 $父从全部单选。

I have 2 issues that are occurring when i use radio buttons in angular.

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)

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.

Basically I want the All() radio button to show unfiltered results.

Here is the 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>

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

解决方案

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 = "";

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.

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

When you use $parent.selectedCandy on the radio outside of the repeater it is looking above its scope and not on the controller scope.

Simply remove $parent from the "all" radio.