AngularJS와 나 부트 스트랩

Question

에 checklistbox를 사용하는 방법

는 아무도 내가 AngularJS와

Answer 1

HTML에서 체크 박스 목록을 표시 할 수있는 방법 저를 제안 할 수 업데이트 :

HTML :

<div ng-app="app"> 
    <div ng-controller="TodoCtrl"> 
     <!--<span ng-repeat="(checkboxName, checkboxValue) in checkboxes"> 
      {{ checkboxName }} 
      <input type="checkbox" ng-model="checkboxValue"/> 
     </span>--> 
     <checklist checkboxes="checkboxes" on-change="checkboxInfo(name, value)"></checklist> 
    </div> 
</div> 

자바 스크립트 :

var app = angular.module('app', []); 
app.controller('TodoCtrl', function($scope) { 
    $scope.foo = true; 
    $scope.bar = false; 
    $scope.baz = true; 
    $scope.baa = true; 

    $scope.checkboxes = { 
     'foo': $scope.foo, 
     'bar': $scope.bar, 
     'baz': $scope.baz, 
     'baa': $scope.baa 
    }; 

    // Non-encapsulated activity: updates parent scope values 
    $scope.checkboxInfo = function(name, value) { 
     console.log('Checkbox "' + name + '" clicked. It is now: ' + value + '.'); 
     $scope[name] = value; 
    }; 

    // This shouldn't do anything if we delete '$scope[name] = value', since we isolated the scope: 
    $scope.$watchCollection('[foo, bar, baz, baa]', function() { 
     console.log($scope.foo, $scope.bar, $scope.baz, $scope.baa); 
    }); 
}) 
.directive('checklist', function($timeout) { 
    return { 
     restrict: 'E', 
     scope: { 
      checkboxes: '=', // create an isolate scope w/ 2-way binding 
      onChange: '&'  // execute a function in the parent scope 
     }, 
     template: 
      '<span ng-repeat="(checkboxName, checkboxValue) in checkboxes">' + 
       '{{ checkboxName }}' + 
       '<input type="checkbox" ng-model="checkboxValue" ng-change="onChange({name:checkboxName, value:checkboxValue})"/>' + 
      '</span>', 
     link: function(scope, element, attrs) { 
      // Add encapsulated activity as necessary 
     } 
    }; 
});