在節點中保存一個複選框列表在Angularjs中

我想用一個節點後端在angularjs中使用綁定來保存和加載一個複選框列表。這個SO問題（How do I bind to list of checkbox values with AngularJS?）回答了我如何從靜態JavaScript對象加載複選框，但是如何在用戶選擇它們之後保存複選框值？在節點中保存一個複選框列表在Angularjs中

我想將複選框的值保存在單個字段中，但是如何告訴angular將複選框的值綁定到模型中爲我的mongodb定義的單個字段？由於有多個複選框，我不能使用ng-model。

不用說，我是新來的角所以這裏的任何幫助是極大的讚賞...

感謝您的幫助，您可以提供。

kseudo

來源

2013-10-25 kSeudo

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

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

DEMO2 Fiddle

來源

2013-10-25 11:31:42

感謝您的快速回復格言。我想將複選框值保存爲模型字段中的json字符串。因此，當用戶點擊保存，產生這個字符串： [ {名稱：「蘋果」，檢查：真正}， {名稱：「橙」，檢查：假} ] 並保存到像模特team.fruits。你能提出一些關於如何使用狀態改變來實現這個目標的代碼嗎？再次感謝。 – kSeudo

再次感謝您的超級快速回復Maxim。我如何傳遞{{fruits |}評估的值json}}發送到控制器，以便將其保存到模型字段中，例如「foods.fruits」？目前我只是不知道如何將這個值傳遞給控制器... – kSeudo

控制器有'$ scope.fruits' - 這是你的模型，如果你使用GUI支付（用基本單詞），這個模型會改變 –

比方說，你定義你的模型，例如：

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-25 12:02:24 package

在節點中保存一個複選框列表在Angularjs中

回答

相關問題