Question

我想使用angularjs中的节点后端绑定来保存和加载复选框列表。这个SO问题（How do I bind to list of checkbox values with AngularJS?）回答了如何从静态javascript对象加载复选框，但是如何在用户选择后保存复选框值？

我想在单个字段中保存复选框值，但是如何告诉angular将复选框值绑定到模型中定义的单个字段到我的mongodb？我不能使用ng-model，因为有多个复选框。

毋庸置疑，我是棱角分明的新人，所以非常感谢任何帮助...

感谢您提供的任何帮助。

kseudo

Answer 1

只需将ng-model添加到您的复选框即可。通过这种方式，您可以在任何复选框状态更改时更新控制器中的模型。

以下是示例：

<强> HTML

<div ng-controller="Ctrl">
    <label ng-repeat="fruit in fruits">
  <input
    type="checkbox"
    name="fruit.name"
   ng-model="fruit.value"
  > {{fruit.name}}
</label>
    <pre>{{fruits| json}}</pre>    
</div>

<强> JS

var app = angular.module('app', []);
function Ctrl($scope) {
    $scope.fruits = [{
        name: 'apple',
        value: false
    }, {
        name: 'orange',
        value: false
    }, {
        name: 'pear',
        value: false
    }, {
        name: 'naartjie',
        value: false
    }];
}

演示 Fiddle

<强> [编辑]

BTW我们可以使用angular.copy()方法制作副本。当我们按下按钮时，将创建fruits模型的新副本（您应该将其作为json发送到服务器）。旧模型fruits将保持不变：

$scope.fruitsCopy = [];

 $scope.init = function(){
  $scope.fruitsCopy = angular.copy($scope.fruits );
}

要将数据转换为JSon，我会使用：

var jsonData = JSON.stringify($scope.fruitsCopy);

演示2 Fiddle

Answer 2

假设您已将模型定义为：

function Ctrl($scope) {
    $scope.items = [{
      name: 'A',
      checked: false
    }, {
      name: 'B',
      checked: false
    }, {
      name: 'C',
      checked: false
    }, {
      name: 'D',
      checked: false
    }];
}

并为模型创建了一个视图：

<ul>
   <li ng-repeat="item in items">
      <label>
        <input type="checkbox" ng-model="item.checked">
        {{item.name}}
      </label>
   </li>
</ul>
<button ng-click="save()">save</button>

接下来，您必须定义save功能：

$scope.save = function() {
  //angular.toJson converts array to string, something like
  // '[{"name":"A","checked":false},{"name":"B","checked":true},...]'
  var json = angular.toJson($scope.items);
  //Service is angular service for your model that makes http requests to your backend
  Service.save(json).then(function(){
    //here you can notify user that data is persisted
  }, function() {
    //here you can notify user that there was a problem with request
  });
}

一个简单的模特服务：

.service('Service', function($http) {
   return new function() {
     this.save = function(data) {
       return $http.post('url/to/backend', data);
     }
   }
 });

使用节点在Angularjs中保存复选框列表

2 个答案: