Angular Options with child
HTML
<div ng-controller="myCtrl as c">
<h1>Instruction: Select Option "222" then press "click"</h1>
<h2>Update only "some" property</h2>
<select name="mySelect" id="mySelect"
ng-options="option.name for option in opts1 track by option.id"
ng-model="mod1"></select>
<div>
SELECTED: {{mod1}}
</div>
<button ng-click="c.click1()">
click
</button>
<div>
OPTIONS: {{opts1}}
</div>
<br/>
<br/>
<br/>
<h2>Update 'some' property and 'name'</h2>
<select name="mySelect" id="mySelect"
ng-options="option.name for option in opts2 track by option.id"
ng-model="mod2"></select>
<div>
SELECTED: {{mod2}}
</div>
<button ng-click="c.click2()">
click
</button>
<div>
OPTIONS: {{opts2}}
</div>
<br/>
<br/>
<br/>
<h2>
<h2>Update + Delay + Update</h2>
<select name="mySelect" id="mySelect"
ng-options="option.name for option in opts3 track by option.id"
ng-model="mod3"></select>
<div>
SELECTED: {{mod3}}
</div>
<button ng-click="c.click3()">
click
</button>
<div>
OPTIONS: {{opts3}}
</div>
</div>
JavaScript
var app = angular.module('myApp', []);
angular.module('myApp').controller('myCtrl', ['$scope', '$timeout', function($scope, $timeout){
$scope.opts1 = [
{
id: 1,
name: "111",
some: "qqq"
},
{
id: 2,
name: "222",
some: "www"
}
];
$scope.opts2 = [
{
id: 1,
name: "111",
some: "qqq"
},
{
id: 2,
name: "222",
some: "www"
}
];
$scope.opts3 = [
{
id: 1,
name: "111",
some: "qqq"
},
{
id: 2,
name: "222",
some: "www"
}
];
this.click1 = function(){
$scope.opts1 = [
{
id: 1,
name: "111",
some: "qqq"
},
{
id: 2,
name: "222",
some: "www1"
}
];
}
this.click2 = function(){
$scope.opts2 = [
{
id: 1,
name: "111",
some: "qqq1"
},
{
id: 2,
name: "2221",
some: "www1"
}
];
}
this.click3 = function(){
$scope.opts3 = {};
$timeout(function(){
$scope.opts3 = [
{
id: 1,
name: "111",
some: "qqq1"
},
{
id: 2,
name: "2221",
some: "www1"
}
];
}, 0);
}
}]);