我有2个控制器.第一个获取所选项目,第二个获取可用项目.
如何显示新选择的项目?
每个可用项下面的按钮都有一个ng-click,它调用一个名为updateItem的服务,我希望更新发生.
我一直在努力这一点,任何帮助都非常感谢.-谢谢
的jsfiddle
///////////////////////////////////////////////////I want to update this item
- {{item.color}}
- {{item.Distance}}
- {{item.height}}
- {{item.name}}
- {{item.year}}
- {{item.color}}
- {{item.Distance}}
- {{item.height}}
- {{item.name}}
- {{item.year}}
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'); });
Michelle Til.. 7
记住你$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
数组中.您现在可以使用控制器的作用域将这两个数组绑定到您的视图:
app.controller('someController', function ($scope, Items) { $scope.availableItems = Items.availableItems; };
这是一个jsFiddle,使用您提供的代码作为起点演示概念(它还演示了在模块中定义控制器的更好方法):http://jsfiddle.net/BinaryMuse/kV4mK/
记住你$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
数组中.您现在可以使用控制器的作用域将这两个数组绑定到您的视图:
app.controller('someController', function ($scope, Items) { $scope.availableItems = Items.availableItems; };
这是一个jsFiddle,使用您提供的代码作为起点演示概念(它还演示了在模块中定义控制器的更好方法):http://jsfiddle.net/BinaryMuse/kV4mK/