I have 2 controllers. The first gets the selected item the second gets the available items.
How can I display the new selected item?
The button underneath each available item has a ng-click that calls a service called updateItem where I would like the update to happen.
I have been working on this for awhile any help is much appreciated. -Thanks
<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');
});
Remeber that your $scope is not your model; your $scope is the thing you attach your model to. Angular encourages you to build your own model objects that describe your application's behavior. In this example, it seems you have domain concepts of "available items" and "selected items." Here's a simple service that gives you a model for those concepts:
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;
});
So now you have this Items service, which has an addAvailableItem method, which takes an item and adds it to the availableItems array, and a selectItem method, which takes an item and adds it to the selectedItems array. You can now bind those two arrays to your view using a controller's scope:
app.controller('someController', function ($scope, Items) {
$scope.availableItems = Items.availableitems;
};
Here's a jsFiddle that demonstrates the concept using the code you provided as a starting point (it also demonstrates a better way to define your controllers in a module): http://jsfiddle.net/BinaryMuse/kV4mK/
Here's my attempt: fiddle.
I didn't quite understand your data structures, so I changed them a bit. However, I think the important part is there -- how to share the data between the controllers.
function availableItemsCtrl($rootScope, $scope, itemService) {
$scope.availableItems = [{
"color": "White",
...
}];
$scope.updateItem = itemService.storeSelectedItem;
itemService.storeSelectedItem($scope.availableItems[0]);
}
function selectedItemCtrl($scope, itemService) {
$scope.selectedItem = itemService.selectedItem;
}
app.service("itemService", function () {
var that = this;
this.selectedItem = {};
this.storeSelectedItem = function (item) {
angular.copy(item, that.selectedItem);
console.log('update item', item);
}
});
It took me a (long) while to figure out that I had to use angular.copy() instead of
that.selectedItem = item;
because the above would cause selectedItem to be assigned a new array reference, which selectedItemCtrl wouldn't notice -- i.e., $scope.selectedItem would still be referencing the previous array.
I will be interested to see what others come up with.
Update: looks like I completely missed the fact that you wanted to support multiple selected items.