Javascript angularjs在条件上切换类 {{{peep.name}_Javascript_Html_Angularjs

Javascript angularjs在条件上切换类 {{{peep.name}

javascript html angularjs

Javascript angularjs在条件上切换类 {{{peep.name},javascript,html,angularjs,Javascript,Html,Angularjs,上面的代码允许我单击每个重复的li，并有条件地将类设置为strike 我正在研究的是这些列表项的“mass”切换，它还允许我将.strike类应用于所有列表项，通过select元素选择的列表项除外我确信这是一个范围问题，但由于某种原因，我无法实现这一点。我错过了什么这里是一个例子要使其工作，您需要使可见成为数据项的属性。然后，您可以切换其状态，而不仅仅是范围松散的值 <li ng-click="visible = !visible" ng-class="{'strike': !vis

上面的代码允许我单击每个重复的

li

，并有条件地将类

设置为strike

我正在研究的是这些列表项的“mass”切换，它还允许我将

.strike

类应用于所有列表项，通过

select

元素选择的列表项除外

我确信这是一个范围问题，但由于某种原因，我无法实现这一点。我错过了什么

这里是一个例子

要使其工作，您需要使

可见

成为数据项的属性。然后，您可以切换其状态，而不仅仅是范围松散的值

<li ng-click="visible = !visible" ng-class="{'strike': !visible, 'none': visible}" ng-repeat="peep in peeps">{{peep.name}}</li>


使用ng repeat：
（单击名称将其划掉）

{{{peep.name}

仅选择：
{{peep.name}
{{changed.name}

每次

ng repeat

迭代都会创建一个新的

范围

，因此

visible

属性被锁定在当前重复范围内。选项上的

ng repeat

也会为每次迭代创建一个新的

范围

，但是

visible

属性与以前的

ng repeat

范围不共享，它们是完全不同的范围

这里是一个有点不同的解决方案，由戴文Tryon给出的方法

这很好，但他想删除除更改时选择的项目之外的所有项目：）应该很容易从这里构建一个函数来实现这一点。我的电池没电了！！只需要构建一个循环所有的函数，并在

ng change

中调用它。是的，应该不会有问题。：）

<body>
  <h3>using ng-repeat:</h3>
  <p>(click a name to cross it out)</p>
    <div ng-init="peeps = [
      {name:'John', age:25, gender:'boy', visible:true},
      {name:'Jessie', age:30, gender:'girl', visible:true},
      {name:'Johanna', age:28, gender:'girl', visible:true},
      {name:'Joy', age:15, gender:'girl', visible:true},
      {name:'Mary', age:28, gender:'girl', visible:true},
      {name:'Peter', age:95, gender:'boy', visible:true},
      {name:'Sebastian', age:50, gender:'boy', visible:true},
      {name:'Erika', age:27, gender:'girl', visible:true},
      {name:'Patrick', age:40, gender:'boy', visible:true},
      {name:'Samantha', age:60, gender:'girl', visible:true}
    ]"></div>
      <ul ng-init="visible = true">
        <li ng-click="peep.visible = !peep.visible" ng-class="{'strike': !peep.visible, 'none': peep.visible}" ng-repeat="peep in peeps">{{peep.name}}</li>
      </ul>
    <div>
      <span>select only:</span>
      <select ng-model="selectedPeep" ng-change="peeps[selectedPeep].visible = !peeps[selectedPeep].visible">
        <option ng-repeat="peep in peeps" ng-value="$index">{{peep.name}}</option>
      </select>
      <span>{{changed.name}}</span>
    </div>
  </body>