I am in need of creating a data binding to an array of strings, specifically an array of directions.
This is how I implemented it:
JS
function ShoppingCartCtrl($scope) {
$scope.directions = ["a", "b", "c"];
$scope.addItem = function (item) {
$scope.directions.push(item);
$scope.item = "";
};
$scope.removeItem = function (index) {
$scope.directions.splice(index, 1);
};
}
HTML
<div ng-app>
<div ng-controller="ShoppingCartCtrl">
<br />
<table border="1">
<thead>
<tr>
<td>directions</td>
<td>Remove Item</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in directions">
<td>
<input ng-model="item" />{{$index}}
</td>
<td>
<input type="button" value="Remove" ng-click="removeItem($index)" />
</td>
</tr>
</tbody>
</table>
<br />
<table>
<tr>
<td>
<input type="text" ng-model="item" />
</td>
<td colspan="2">
<input type="Button" value="Add" ng-click="addItem(item)" />
</td>
</tr>
<tr>
<td>{{directions}}</td>
</tr>
</table>
</div>
</div>
Although everything seems to be working as expected, there is a bug that I cannot seem to locate. When trying to modify the values directly from the input fields, nothing happens (THIS WAS SOLVED BY USING THE LATEST VERSION OF ANGULAR IN JSFIDDLE).
Continuation: Now you can modify the values, but they are not updated in the model. Any assistance would be greatly appreciated!!
You can view it in action on this jsfiddle