Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>Array Binding CheckBox</title>
</head>
<body ng-controller="SelectLikeFruitsController">
  <table id="table-01">
    <thead>
      <tr>
        <th>ID</th>
        <th>名前</th>
        <th>好きな果物</th>
        <th>JSON</th>
      </tr>
    </thead>
    <tr ng-repeat="person in people">
      <td>{{person.id}}</td>
      <td>{{person.name}}</td>
      <td>
        <ul ng-repeat="(fruitId,fruitName) in fruits">
          <li>
            <input type="checkbox" id=person_like_fruit_{{person.id}}_{{fruitId}} ng-checked="person.likeFruits.indexOf(fruitId) > -1" ng-click="toggleCheck(person.id,fruitId)">
            <label for="person_like_fruit_{{person.id}}_{{fruitId}}">{{fruitName}}</label>
          </li>
        </ul>
      </td>
      <td>{{ person | json }}</td>
    </tr>
  </table>
</body>
</html>
 
(function(app){
  'uses strict';
  angular.module('app', [])
  .controller('SelectLikeFruitsController',function($scope){
    $scope.fruits={
      '1': 'リンゴ',
      '2': 'バナナ',
      '3': 'グレープ',
      '4': 'オレンジ',
      '5': 'ピーチ'
    };
    
    $scope.people=[
      {id:1,name:'一郎',likeFruits:['1']},
      {id:2,name:'次郎',likeFruits:['2']},
      {id:3,name:'三郎',likeFruits:['3']},
      {id:4,name:'四郎',likeFruits:['4']},
      {id:5,name:'五郎',likeFruits:['5']}
    ];
    
    
    $scope.toggleCheck = function(targetPersonId,fruitId){
      var targetPersonLikeFruits,idx;
      angular.forEach($scope.people,function(person){
        if(angular.equals(person.id,targetPersonId)){
          targetPersonLikeFruits = person.likeFruits;
        }
      });
      idx = targetPersonLikeFruits.indexOf(fruitId);
      if(angular.equals(idx,-1)){
        targetPersonLikeFruits.push(fruitId);
      }else{
        targetPersonLikeFruits.splice(idx,1);
      }
    };
  
  });
})();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
CM-Kajiwarapro
0viewers