Сохранение списка флажков в Angularjs с узлом

Question

Я хочу сохранить и загрузить список флажков, используя привязку в angularjs с базовым узлом узла. Этот вопрос SO (How do I bind to list of checkbox values with AngularJS?) отвечает, как я могу установить флажок из статического объекта javascript, но как сохранить значения флажка после того, как пользователь их выберет?

Я хочу сохранить значения флажка в одном поле, но как я могу указать угловое значение для привязки значений флажка в одно поле, определенное в модели, к моему 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 
    }]; 
} 

Demo Fiddle

[EDIT]

BTW мы можем сделать копию с помощью angular.copy() метода. Когда мы нажмем кнопку, будет создана новая копия модели fruits (и вы должны отправить ее на сервер как json). Старая модель fruits останется прежним:

$scope.fruitsCopy = []; 

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

Для преобразования данных в JSON Я хотел бы использовать:

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

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