Attempting to dynamically add or remove elements from a list upon clicking, however encountering issues with removing the correct elements while adding them initially seems to function correctly.
The JavaScript code snippet:
angular.module('app', [])
.controller('MainCtrl', function($scope) {
$scope.tags = ['a', 'b', 'c']
$scope.book = {tags: []}
$scope.toggle_tag = function(tag) {
index = $scope.book.tags.indexOf(tag)
if (index == -1)
$scope.book.tags.push(tag)
else
$scope.book.tags.splice(tag, 1)
}
});
The corresponding HTML code snippet:
<div ng-app="app" ng-controller="MainCtrl">
<input type="text" ng-model="book.tags" ng-list="/ /" />
<p>{{book.tags}}</p>
<span class="tag" ng-repeat="tag in tags" ng-click="toggle_tag(tag)">{{tag}}</span>
</div>
Tags can be clicked on to either add or remove them. The ng-model
is added to the input field, but upon clicking, the input does not update correspondingly. Looking for a solution to make it update properly.