AngularJS在列表中重复数据

时间:2015-05-26 12:46:54

标签: javascript html angularjs

对此可能有一个简单的解决方案:

我在控制器中有一些数据,具体取决于是否选择了项目,它应该显示一些html,如果没有选中它,它应该显示一些其他的html。

如果选择了项目,则html应为:

<li>
    <a href="#"><span class="fa fa-check" aria-hidden="true"></span>
    <span class="sr-only">Selected:</span>Worldwide</a>
</li>

如果未选择项目,则html应为:

<li>
    <a href="/example/link">Link</a>
</li>

如果我只需更改class属性,那么这很容易解决,那么我可以像<span ng-class="dropdownItemClass(dropdownItem)">

那样

但如果选中aria-hidden="true",我还需要添加IntentFilter ifilter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED); Intent batteryStatus = context.registerReceiver(null, ifilter); int level = batteryStatus.getIntExtra(BatteryManager.EXTRA_LEVEL, -1); int scale = batteryStatus.getIntExtra(BatteryManager.EXTRA_SCALE, -1); float batteryPct = level / (float)scale; //the variable 'batteryPct ' represents the % of battery ,如果未选中,则将其删除。

1 个答案:

答案 0 :(得分:0)

<li ng-repeat="number in numbers">
    <input type="checkbox" ng-model="IsSelected">
    <a href="#" ng-if="!IsSelected"><span class="fa fa-check" aria-hidden="true"></span>
      <span class="sr-only">Selected:</span>Worldwide {{number}}
    </a>
    <a ng-if="IsSelected" href="/example/link">Link</a>
</li>

var app = angular.module('example', []);

app.controller('MainCtrl', function($scope) {
  $scope.numbers = [1,2,3,4,5,6,7];
});
<!DOCTYPE html>
<html ng-app="example">

  <head>
    <script src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="number in numbers">
        <input type="checkbox" ng-model="IsSelected">
        <a href="#" ng-if="!IsSelected"><span class="fa fa-check" aria-hidden="true"></span>
          <span class="sr-only">Selected:</span>Worldwide {{number}}
        </a>
        <a ng-if="IsSelected" href="/example/link">Link</a>
      </li>
    </ul>
  </body>

</html>