angularjs pass index throuhg директива

-1

Мне нужна помощь с этим кодом.angularjs pass index throuhg директива

<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'; 
    }

мне нужно, что только литий, который в настоящее время нажать, чтобы изменить имя CSS, но вместо этого изменить все Ли, что я перечислил.

источник

2017-02-08 Isidoro Barrera

Что вы назвали css? – lealceldeiro

Прекратите использование '$ index' для таких проблем. Если вы повторяете массив, вы можете использовать объект, заданный угловым. В вашем случае 'selected (mesa)'. Кроме того, вы получите много 'divs' с тем же' id', который недействителен HTML. Кстати, ваша функция не имеет никакого смысла. Похоже, вы пропустите основное понимание javascript. – Michelangelo

Вы инициализируете переменную round вне цикла повторения, поэтому выражение {{round}} всегда укажет на эту единственную, общую переменную. Если вы обновите его один раз, он будет обновлен для всех детей ng-repeat.

Если я понимаю ваш вопрос, вы пытаетесь изменить класс CSS для div внутри повтора, правильно? Что вы можете сделать в этом случае сохранить выбранный индекс в области видимости контроллера, и убедитесь, что значение по индексу внутри цикла

<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, но идея такая же.

источник

2017-02-08 19:53:44

<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"> 
 
    \t .round { 
 
    \t \t background: green; 
 
    \t } 
 
    \t .round1 { 
 
    \t \t background: blue; 
 
    \t } 
 
    </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>

Я думаю, что у ищет for¿?

источник

2017-02-08 21:41:37 DelhiPanda

angularjs pass index throuhg директива

ответ

Смежные вопросы