セマンティックUIとAngularJSを使ってチェックボックスをチェックするには？

セマンティックUIをチェックボックスに使用しているので、<input>タグは<div class="ui checkbox">でラップされています。チェックボックスをオンにすると、クラスcheckedが追加されます。セマンティックUIとAngularJSを使ってチェックボックスをチェックするには？

<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>

どのように私はAngularJSを使用して、選択したチェックボックスのidまたはvalueを得るのですか？ありがとうございました。

出典

2016-07-17 Joe

あなたは、あなたが選択したオブジェクトのみを取得するためにArray.prototype.filter()メソッドを使用することができ、あなたのコントローラ

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

}

出典

2016-07-17 13:41:29

に機能を持たせることができます。ここで

はデモです：

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>

出典

2016-07-17 13:58:15 developer033

セマンティックUIとAngularJSを使ってチェックボックスをチェックするには？

答えて

関連する問題