Question

我需要有关此代码的帮助。

<ul ng-init="round = 'round'">
  <li ng-repeat="mesa in mesas" ng-click="selected($index)">
    <div id="{{round}}">&nbsp;</div>
    MESA {{mesa}}
   </li>
 </ul>


$scope.selected = function ($index){
    $scope.index.round = 'round1';
  }

我只需要点击的li来更改css名称，而是更改我列出的所有li。

Answer 1

您正在重复循环之外初始化变量round，因此表达式{{round}}将始终指向该奇异的共享变量。如果您更新一次，则会更新ng-repeat的所有子项。

如果我理解你的问题，你试图在重复内部更改div的CSS类，对吗？在这种情况下你可以做的是将所选索引存储在控制器的作用域中，并根据循环内的索引检查该值

<ul>
  <li ng-repeat="mesa in mesas" ng-click="select($index)">
    <div class="round1" ng-if="selectedIndex === $index">&nbsp;</div>
    <div class="round" ng-if="selectedIndex !== $index">&nbsp;</div>
    MESA {{mesa}}
  </li>
</ul>


$scope.select = function ($index){
  $scope.selectedIndex = $index;
}

您也可以使用ng-class代替ng-if，具体取决于CSS的结构，但想法是一样的。

Answer 2

<html ng-app="app">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <style type="text/css">
    	.round {
    		background: green;
    	}
    	.round1 {
    		background: blue;
    	}
    </style>
</head>

<body ng-controller="controller">
    <ul>
        <li ng-repeat="mesa in mesas" ng-click="selected($index)" ng-class="[index[$index].round]">
            <div id="{{ index[$index].id }}">&nbsp;</div>
            MESA {{ mesa }}
        </li>
    </ul>

</html>
<script type="text/javascript">
angular.module('app', [])
    .controller('controller', controller);

controller.$inject = ['$scope'];

function controller($scope) {
    $scope.mesas = ['1', '2', '3'];
    $scope.index = [{
        id: '1',
        round: 'round'
    }, {
        id: '2',
        round: 'round'
    }, {
        id: '3',
        round: 'round'
    }];

    $scope.selected = function($index) {
        $scope.index[$index].round = $scope.index[$index].round === 'round' ? 'round1' : 'round';
    }
}
</script>

我认为你在寻找什么？

angularjs传递索引throuhg指令

2 个答案: