Question

我已经介绍了ng-repeat，其中已经存在静态内容。它工作正常。当我把ng-class和变量设置为不起作用时。如何解决这个问题及其发生的原因。

点击每个李。它没有研究动态元素。

请在小提琴中找到代码。

<h3>FIFA Mactch Summary:</h3>
<div ng-app ng-controller="MyCtrl">
<ul>
<li ng-class='{"selectedClass":classHilight==1}' ng-click="filterNews(3);classHilight=1"> My static content 1</li>
<li ng-class='{"selectedClass":classHilight==2}' ng-click="filterNews(3);classHilight=2" > My static content 2</li>
<li ng-class='{"selectedClass":classHilight==3}' ng-click="filterNews(3);classHilight=3"> My static content 3</li>
    <li ng-repeat="item in items" ng-class='{"selectedClass":classHilight==item.id}' ng-click="filterNews(item.id);classHilight=item.id" >My Dynamic Content {{item.id}}</li>
</ul>

http://jsfiddle.net/gowthambsvg/2m41tjq9/

Answer 1

据说，您的模型中必须始终有.。

在ng-repeat classHilgiht中没有引用范围变量classHilight。它会为scope中的每个项目创建自己的ng-repeat。它没有引用classHilight。但是当classHilight用作key对象的test时，object会从ng-repeat指令的子范围继承该属性。

试试这个：

＆＃13;

var m = [{
  id: 4
}, {
  id: 5
}, {
  id: 6
}];

function MyCtrl($scope) {
  $scope.test = {};
  $scope.items = m;

  $scope.setClass = function() {

  }
}

＆＃13;

.selectedClass {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h3>FIFA Mactch Summary:</h3>
<div ng-app ng-controller="MyCtrl">
  <ul>
    <li ng-class='{"selectedClass":test.classHilight==1}' ng-click="test.classHilight=1">My static content 1</li>
    <li ng-class='{"selectedClass":test.classHilight==2}' ng-click="test.classHilight=2">My static content 2</li>
    <li ng-class='{"selectedClass":test.classHilight==3}' ng-click="test.classHilight=3">My static content 3</li>
    <li ng-repeat="item in items" ng-class='{"selectedClass":test.classHilight==item.id}' ng-click="test.classHilight=item.id">My Dynamic Content {{item.id}}</li>
  </ul>
</div>

＆＃13;

Fiddle here

编辑：我不能说classHilight中的ng-repeat未更新，它正在更新，但在其自己的范围内。 [Ref]

ng-class正在弄乱静态和动态内容

1 个答案: