Reputation: 11389
How to use ng-options.
$scope.fieldTable = [
{
filed:"text",
title:"Global"
},
{
field: "relatedentity",
title: "Entity"
},
{
field:"title",
title:"Title"
},
{
field: "content",
title: "Content"
}
]
I want to build a which use the title as displayed and when select something, popout a alert window which display the according field. The initial selection is
{
filed:"text",
title:"Global"
}
Can anyone help?
Upvotes: 15
Views: 47465
Reputation: 1837
You can use ng-change to do that
<select ng-options="item.title as item.title for item in fieldTable track by item.title" ng-model="selected" ng-change="onChanged()">
then in your onChange() method in the controller you can do whatever you want it to do :) In your case , show an alert with the value
edit: https://plnkr.co/edit/4csDtFVH5mKd7Xr39WtG?p=preview
Upvotes: 4
Reputation: 11234
var app = angular.module('stack', []);
app.controller('MainCtrl', function($scope) {
$scope.fieldTable = [{
field: "text",
title: "Global"
}, {
field: "relatedentity",
title: "Entity"
}, {
field: "title",
title: "Title"
}, {
field: "content",
title: "Content"
}];
$scope.selected = $scope.fieldTable[0];
$scope.hasChanged = function() {
alert($scope.selected.field);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="stack" ng-controller="MainCtrl">
<select ng-options="item.title for item in fieldTable" ng-model="selected" ng-change="hasChanged()">
</select>
</body>
Upvotes: 22