Как установить флажки, используя Semantic UI и AngularJS?

Так как я использую Semantic UI для флажков, <input> тег обернут <div class="ui checkbox"> и что происходит, когда флажок установлен, он просто добавляет класс checked,

<div class="field" ng-repeat="animal in animals">
 <div class="ui checkbox">
  <input class="hidden" tabindex="0"  type="checkbox" value="{{animal.id}}" ng-model="animal.selected">
  <label>{{animal.name}}</label>
 </div>
</div>

Как я могу получить id или же value выбранных флажков с помощью AngularJS? Спасибо.

Источник

2 ответа

Ты можешь использовать Array.prototype.filter() способ получить только выбранные объекты.

Вот демонстрация:

angular.module('app', [])
  .controller('mainCtrl', function($scope) {
    $scope.animals = [];
    for (var i = 0; i <= 5; i++) {
      $scope.animals.push({
        "id": Math.floor(Math.random() * 310),
        "name": "Name " + Math.floor(Math.random() * 420),
        "selected": i % 2 === 0 ? true : false
      });
    }

    $scope.selected = [];

    $scope.show = function() {
      $scope.selected = $scope.animals.filter(function(value) {
        return value.selected;
      });
    }
  });
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <div class="field" ng-repeat="animal in animals track by $index">
    <div class="ui checkbox">
      <input id="checkbox{{$index}}" class="hidden" tabindex="0" type="checkbox" value="{{animal.id}}" ng-model="animal.selected">
      <label for="checkbox{{$index}}" ng-bind="animal.name"></label>
    </div>
  </div>
  <hr>
  <button type="button" value="show" ng-click="show()">Show selected tems</button>
  <pre ng-bind="selected | json"></pre>
</body>

</html>

Источник

Вы можете иметь функцию в вашем контроллере

$scope.getAnimal= function(){
   angular.forEach($scope.animals, function(animal){
    if (animal.selected) do smth here...
})

}

Источник
Другие вопросы по тегам