复选框设定值与AngularJs表单模型 [英] checkbox set value to model in form with AngularJs

问题描述

我特林做一个形式，而这种形式HAVA许多复选框，

I am tring make a form , and this form hava many checkbox ,

我想获得价值复选框，并将其设置为模型，

I want to get checkbox value , and set it to model,

这种模式将提交给服务

这是我的code

<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()};

 });

我搜索一下许多数据，但并没有什么???

I search about many data , but there is nothing???

请帮忙

非常感谢！

推荐答案

下面是我能想到的最简单的方法。
http://plnkr.co/edit/vVuV59Vwc6wJ8ptBcfmI?p=$p$pview

Here is the simplest approach I could think of. http://plnkr.co/edit/vVuV59Vwc6wJ8ptBcfmI?p=preview

我建议使用浏览器的时候东西开发控制台
似乎不工作。此外，从最简单的实现起动

I suggest the use of dev console of the browser when something seems not working. Also, starting from the simplest implementation.

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;
        });
      });
    }
  };
});

这篇关于复选框设定值与AngularJs表单模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！