2

我想使用带有节点后端的angularjs中的绑定来保存和加载复选框列表。这个 SO 问题（如何使用 AngularJS 绑定到复选框值列表？）回答了如何从静态 javascript 对象加载复选框，但如何在用户选择复选框值后保存它们？

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

不用说，我是 Angular 的新手，所以非常感谢这里的任何帮助......

感谢您的任何帮助，您可以提供。

克苏多

4

2 回答 2

3

只需添加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

[编辑]

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

$scope.fruitsCopy = [];

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

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

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

演示2Fiddle

于 2013-10-25T11:31:42.193 回答
0

假设您将模型定义为：

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);
     }
   }
 });
于 2013-10-25T12:02:24.980 回答