I am looking to achieve the following:
I have an array called 'all' that contains all possible items. I want to create a subset of that array and store it in 'subset':
JavaScript (js.js):
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.all = [];
$scope.subset = [{name: 'n1', inUse: false}, {name: 'n2', inUse: false}, {name: 'n3', inUse: false} ];
// adding new item to 'all'
$scope.addItem = function() {
var newItem = {name: '?', inUse: false};
$scope.all.push(newItem);
};
$scope.updateItem = function(index) {
// index refers to 'all' array
$scope.all[index].inUse = false;
$scope.all[index] = $scope.selectedItem;
$scope.all[index].inUse = true;
};
});
HTML File (HTML.html):
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="angular-1.4.8.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body ng-controller="myController">
<button ng-click="addItem()">Add Item:</button>
<div ng-repeat="item in all">
{{item.name}}
<select ng-options="item as item.name for item in subset | filter: {inUse: false}"
ng-change="updateItem($index)"
ng-model="selectedItem"></select>
</div>
</body>
</html>
However, I am encountering an error 'TypeError: Cannot set property 'inUse' of undefined'. The inUse property seems to be in a child scope. Is this behavior expected? How can I access the selected item within my scope?
I have tried the following approach, but I'm not convinced it's the right way:
var childScope = $scope.$$childHead;
for (var i = 0; i < index ; i++) {
childScope = childScope.$$nextSibling;
}
$scope.all[index] = childScope.selectedItem;
What is the correct method to achieve my desired outcome?