With my ng-repeat, I am attempting to include ng-model inside each repeated li, followed by two-way data binding outside of the ng-repeat. You can see the example in this jsbin: http://jsbin.com/yutinifivi/edit?html,js,output
I have searched extensively for a solution regarding ng-model and ng-repeat, but have not been able to find what I need.
If anyone is willing to take the time to understand my issue, I would greatly appreciate the help in furthering my understanding of AngularJS.
Here is the relevant code:
(function(){
var app = angular.module("myApp",[]);
}());
(function(){
var myCtrl = function($scope){
$scope.selection_add = {};
$scope.selection_edit = {};
$scope.selection_delete ={};
$scope.categories = [
{"name": "Sport", "id": "50d5ad" } ,
{"name": "General", "id": "687ffr" },
{"name": "Activities", "id": "678ffb" },
{"name": "Regards", "id": "678fff" },
{"name": "Thanks", "id": "678fer" },
{"name": "Goes", "id": "678fgf" },
{"name": "Oppertnities", "id": "674ffr" },
{"name": "Convince", "id": "654ffr" },
{"name": "Mopols", "id": "623ffr" }
];
$scope.setCurrentCategory = function setCurrentCategory(category) {
$scope.currentCategory = category;
};
};
angular.module("myApp")
.controller("myCtrl", myCtrl);
}());<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8>
<title>JS Bin</title>
</head>
<body>
<div class="container" ng-controller="myCtrl">
<div>
<table>
<tr>
<th>add</th>
<th>edit</th>
<th>delete</th>
</tr>
<tr ng-repeat="category in categories" ng-click="setCurrentCategory(category)">
<td><input id="{{category.id + '_add'}}" ng-model="selection_add[category.id]" type="text>{{category.name}}</td>
<td><input id="{{category.id + '_edit'}}" ng-model="selection_edit[category.id]" type="text>{{category.name}}</td>
<td><input id="{{category.id + '_delete'}}" ng-model="selection_delete[category.id]" type="text>{{category.name}}</td>
</tr>
</table>
<h1>Add for {{currentCategory.name}}</h1>
<input type="text" ng-model="selection_add[currentCategory.id]>
<h1>Edit for {{currentCategory.name}}</h1>
{{selection_edit[currentCategory.id]}}
<h1>Delete for {{currentCategory.name}}</h1>
{{selection_delete[currentCategory.id]}}
</div>
</div>
</body>
</html>