Как создать привязать список элементов как группу без ng-repeat?

Я пытался научиться Угловому, но ударил маленького блокатора. В моей разметке есть список DIV, которые при нажатии на кнопку get toggled (новый класс). Это статический список параметров, и я хотел бы избежать директивы ng-repeat.Как создать привязать список элементов как группу без ng-repeat?

Я хотел бы связать его с массивом выборов. При щелчке идентификатор элемента должен быть добавлен в массив, а при невыбранном - его следует удалить. Существование идентификатора элемента в массиве выбора определяет, должен ли он иметь «активный» класс.

Ниже приведен пример того, как я это сделал в Angular, но это означает, что я не могу использовать свой статический список DIV, но используйте ng-repeat с JSON. Я поиграл с этим и правильно привязал его к массиву selected. Щелчок по кнопке корректно сбрасывает активный класс, показывающий, что привязка работает.

Могу ли я выполнить это, не спускаясь по пути JSON + ng-repeat? Пример, указывающий на меня, был бы приятным. Спасибо

Вот CSS:

.item { 
    border-color: #ddd; 
    background-color: #fff; 
    color: #444; 
    position: relative; 
    z-index: 2; 
    display: block; 
    margin: -1px; 
    padding: 16px; 
    border-width: 1px; 
    border-style: solid; 
    font-size: 16px; 
} 

.item.active { 
    border-color: #ccc; 
    background-color: #d9d9d9; 
}

Вот JS:

var SampleApp; 
(function (SampleApp) { 

    var app = angular.module('sampleApp', []); 
    app.controller('MainCtrl', function ($scope) { 
     $scope.selected = []; 

     $scope.clicked = function (member) { 
      var index = $scope.selected.indexOf(member.name); 
      if (index > -1) { 
       $scope.selected.splice(index, 1); 
       member.selected = false; 
      } else { 
       $scope.selected.push(member.name); 
       member.selected = true; 
      } 
      console.log($scope.selected); 
     } 
     $scope.items = [{ 
      name: "item1" 
     }, { 
      name: "item2" 
     }, { 
      name: "item3" 
     }, { 
      name: "item4" 
     }, { 
      name: "item5" 
     }]; 
    }); 

})(SampleApp || (SampleApp = {}));

Вот разметка:

<div ng-app="sampleApp" ng-controller="MainCtrl"> 
    <div class="item" ng-repeat="item in items" ng-click="clicked(item)" ng-class="{ active: selected.indexOf(item.name) !== -1 }" id="item.name">{{ item.name }}</div> 
    <button type="button" ng-click="selected = []">Reset</button> 
</div>

источник

2016-09-29 Mridang Agarwalla

<div class="item" id="germany" 
    ng-click="toggle('germany')" 
    ng-class="{ active: selected.indexOf('germany') >= 0 }">Germany</div>

и повторить ту же схему для другого страны.

В контроллере:

$scope.toggle = function(country) { 
    var index = $scope.selected.indexOf(country); 
    if (index >= 0) { 
     $scope.selected.splice(index, 1); 
    } else { 
     $scope.selected.push(country); 
    } 
};

Не знаю, почему вы хотите, чтобы избежать нг-повтор, хотя. Использование этого во избежание повторения одного и того же кода снова и снова в представлении и, таким образом, снижает риск введения ошибки.

источник

2016-09-29 16:34:40

Как создать привязать список элементов как группу без ng-repeat?

ответ

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