Another question arises in relation to the usage of ng-class...
How can we dynamically add a class to the <ul> element when a <button> within its <li> is clicked?
Here is the HTML code snippet:
<div ng-app="myApp">
<section ng-controller="myCtrl">
<ul>
<li ng-repeat="item in model.items" class="commonClass">{{ item.name }}</li>
<li><button>
active
</button></li>
</ul>
<ul>
<li ng-repeat="item in model.items" class="commonClass">{{ item.name }}</li>
<li><button>
active
</button></li>
</ul>
</section>
</div>
And here is the corresponding JavaScript code:
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.model = {
selected: null,
items : [
{name: "Apple"},
{name: "Banana"},
{name: "California"}
]
};
})