复选框使用AngularJs将值设置为表单中的模型

时间:2013-08-15 07:36:08

标签: angularjs

我正在制作一张表格,这个表格有很多复选框,

我想获取复选框值,并将其设置为模型,

此模型将提交服务

这是我的代码

<form name="form" ng-submit="add()">
  <dl>
    <dt>Manager Id</dt>
      <dd ng-repeat="user in User.user" >
        <input name="userName[user.userId][]" type="checkbox" 
          ng- model="newProgram.program.managerId" 
          ng-true-value="{{user.userId}}" ng-false-value="{{user.userId}}" check />
          {{user.userUsername}}
       </dd>
   <dt>Member Id</dt>
     <dd ng-repeat="user in User.user">
       <input name="userName[user.userId][]" type="checkbox" 
         ng-model="newProgram.program.memberId" value= "{{user.userId}}" check />
         {{user.userUsername}}
     </dd>
 </dl>
 <div class="form-actions">
   <button type="submit" 
    ng-disabled="form_edit.$invalid || isUnchanged(newProgram)" >Add</button>
</div>
</form>



angular.module('elnApp')
  .directive('check', function () {
    return {
     restrict: 'A',
     require: 'ngModel',
     link: function(scope, elm, attr, ngModelCtrl, $filter){ 
          elm.bind('click', function() {
            scope.$watch('newProgram.program.managerId', function (value){
               // set {{user.userId}} to ngModel
              }

          });
        });
    }
  }
});




angular.module('elnApp')
 .controller('AddCtrl', function ($scope, programService, userService) {
  $scope.master= {};

  $scope.add = function () {
    programService.add({

  }, $scope.newProgram, function (data) {
    $location.path('/grid');
  });
};

$scope.isUnchanged = function(user) {
  return angular.equals(user, $scope.master);
};

$scope.User= {'user': userService.query()};

 });

我搜索了很多数据,但没有什么???

请帮助

非常感谢!

1 个答案:

答案 0 :(得分:0)

这是我能想到的最简单的方法。 http://plnkr.co/edit/vVuV59Vwc6wJ8ptBcfmI?p=preview

我建议使用浏览器的开发控制台 似乎不起作用。此外,从最简单的实现开始。

JS:

<input type="checkbox" check="model" value="{{ value }}"/>

HTML:

app.directive('check', function() {
  return {
    scope: { model: '=check', value: '@' },
    link: function( scope, elem ) {
      elem.bind('click', function() {
        var value = elem.attr('checked') ? scope.value : null;
        scope.$apply(function() {
          scope.model = value;
        });
      });
    }
  };
});