我有 2 个 Controller 。第一个获取所选项目,第二个获取可用项目。
如何显示新选择的项目?
每个可用项目下方的按钮都有一个 ng-click,它调用一个名为 updateItem 的服务,我希望在其中进行更新。
我已经为此工作了一段时间,非常感谢任何帮助。 -谢谢
<div ng-controller="seletedItemCtrl">
<p><i>I want to update this item</i></p>
<div ng-repeat="item in selectedItems">
<ul>
<li>{{item.color}}</li>
<li>{{item.Distance}}</li>
<li>{{item.height}}</li>
<li>{{item.name}}</li>
<li>{{item.year}}</li>
</ul>
</div>
</div >
///////////////////////////////////////////////////
<div ng-controller="availableItemsCtrl">
<div ng-repeat="item in availableItems">
<ul>
<li>{{item.color}}</li>
<li>{{item.Distance}}</li>
<li>{{item.height}}</li>
<li>{{item.name}}</li>
<li>{{item.year}}</li>
</ul>
<button ng-click = 'updateItem()' >select item</button>
</div>
</div>
JS
var app = angular.module('myApp', []);
function availableItemsCtrl($rootScope, $scope){
$scope.availableItems = {
"Items": {
"Item": {
"Group1": [
{
"color": "White",
"Distance": "NA",
"height": "3ft",
"name": "Underlift",
"year": "1955"
},
{
"color": "blue",
"Distance": "4M",
"height": "2ft",
"name": "Underlift",
"year": "1956"
},
{
"color": "red",
"Distance": "NA",
"height": "3ft",
"name": "Golen Leaf",
"year": "1968"
},
{
"color": "yellow",
"Distance": "22M",
"height": "10in",
"name": "Together",
"year": "1988"
}
]
},
}
}
$scope.availableItems = $scope.availableItems.Items.Item.Group1;
}
function seletedItemCtrl($rootScope, $scope){
$scope.seletedItem = {
"Items":{
"Item":{
"Group1":[{
"color": "black",
"Distance": "2M",
"height": "1in",
"name": "never",
"year": "1922"
}
]
}
}
}
$scope.selectedItems = $scope.seletedItem.Items.Item.Group1;
}
app.service("updateItem", function(){
console.log('update item');
});
最佳答案
请记住,您的 $scope
不是您的模型;你的 $scope
是你附加你的模型的东西。 Angular 鼓励您构建自己的模型对象来描述应用程序的行为。在此示例中,您似乎具有“可用项目”和“选定项目”的域概念。这是一个简单的服务,可为您提供这些概念的模型:
app.factory('Items', function () {
var Items = {
availableItems: [],
selectedItems: []
};
Items.addAvailableItem = function (item) {
Items.availableItems.push(item);
};
Items.selectItem = function (item) {
Items.selectedItems.push(item);
};
return Items;
});
所以现在你有了这个 Items
服务,它有一个 addAvailableItem
方法,它接受一个项目并将它添加到 availableItems
数组中,和一个 selectItem
方法,该方法接受一个项目并将其添加到 selectedItems
数组中。您现在可以使用 Controller 的作用域将这两个数组绑定(bind)到您的 View :
app.controller('someController', function ($scope, Items) {
$scope.availableItems = Items.availableItems;
};
这是一个 jsFiddle,它使用您提供的代码作为起点来演示该概念(它还演示了在模块中定义 Controller 的更好方法):http://jsfiddle.net/BinaryMuse/kV4mK/
关于json - 如何使用来自具有 angular.service 的另一个 Controller 的数据更新一个 Controller ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14665856/