当 ng-model 在 AngularJS 中更新时 md-select 中的 OnSelect 事件
OnSelect event in md-select when ng-model gets update in AngularJS
当另一个 属性 发生变化时,我需要在 collection 中更新一个 属性。
我的Collection是
$scope.Persons = [
{
Name: "Emma",
Mode:0,
HasModified:false
},
{
Name: "Watson",
Mode:0,
HasModified:false
},
{
Name: "Harry",
Mode:0,
HasModified:false
}
];
属性Mode
绑定在一个md-select
中,当用户选择任何选项,然后我需要将 属性 HasModified
更新为 true
HTML 栏目:
<tbody>
<tr ng-repeat="main in Persons">
<td>
<p>{{main.Name}}</p>
</td>
<td>
<md-select ng-model="main.Mode" onselect="UpdateMode(main)">
<md-option ng-value="1">Good</md-option>
<md-option ng-value="2">Bad</md-option>
</md-select>
</td>
<td>
<p>{{main.HasModified}}</p>
</td>
</tr>
</tbody>
onselect
事件未能更新更改
$scope.UpdateMode = function(collection) {
if((collection != null) && (collection != undefined) && (collection.Mode >0)) {
collection.HasModified = true;
}
}
完整的 HTML Angular 源代码是
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1" cellpadding="2" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Mode</th>
<th>Has Modified</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="main in Persons">
<td>
<p>{{main.Name}}</p>
</td>
<td>
<md-select ng-model="main.Mode" onselect="UpdateMode(main)" aria-label="{{main.Name}}">
<md-option ng-value="1">Good</md-option>
<md-option ng-value="2">Bad</md-option>
</md-select>
</td>
<td>
<p>{{main.HasModified}}</p>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module('myApp', ['ngMaterial']);
app.controller('myCtrl', function ($scope, $http, $q) {
$scope.Persons = [
{
Name: "Emma",
Mode:0,
HasModified:false
},
{
Name: "Watson",
Mode:0,
HasModified:false
},
{
Name: "Harry",
Mode:0,
HasModified:false
}
];
$scope.UpdateMode = function(collection) {
if((collection != null) && (collection != undefined) && (collection.Mode >0)) {
collection.HasModified = true;
}
}
});
</script>
</body>
</html>
请帮助我如何更新HasModified
属性...
当另一个 属性 发生变化时,我需要在 collection 中更新一个 属性。
我的Collection是
$scope.Persons = [
{
Name: "Emma",
Mode:0,
HasModified:false
},
{
Name: "Watson",
Mode:0,
HasModified:false
},
{
Name: "Harry",
Mode:0,
HasModified:false
}
];
属性Mode
绑定在一个md-select
中,当用户选择任何选项,然后我需要将 属性 HasModified
更新为 true
HTML 栏目:
<tbody>
<tr ng-repeat="main in Persons">
<td>
<p>{{main.Name}}</p>
</td>
<td>
<md-select ng-model="main.Mode" onselect="UpdateMode(main)">
<md-option ng-value="1">Good</md-option>
<md-option ng-value="2">Bad</md-option>
</md-select>
</td>
<td>
<p>{{main.HasModified}}</p>
</td>
</tr>
</tbody>
onselect
事件未能更新更改
$scope.UpdateMode = function(collection) {
if((collection != null) && (collection != undefined) && (collection.Mode >0)) {
collection.HasModified = true;
}
}
完整的 HTML Angular 源代码是
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1" cellpadding="2" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Mode</th>
<th>Has Modified</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="main in Persons">
<td>
<p>{{main.Name}}</p>
</td>
<td>
<md-select ng-model="main.Mode" onselect="UpdateMode(main)" aria-label="{{main.Name}}">
<md-option ng-value="1">Good</md-option>
<md-option ng-value="2">Bad</md-option>
</md-select>
</td>
<td>
<p>{{main.HasModified}}</p>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module('myApp', ['ngMaterial']);
app.controller('myCtrl', function ($scope, $http, $q) {
$scope.Persons = [
{
Name: "Emma",
Mode:0,
HasModified:false
},
{
Name: "Watson",
Mode:0,
HasModified:false
},
{
Name: "Harry",
Mode:0,
HasModified:false
}
];
$scope.UpdateMode = function(collection) {
if((collection != null) && (collection != undefined) && (collection.Mode >0)) {
collection.HasModified = true;
}
}
});
</script>
</body>
</html>
请帮助我如何更新HasModified
属性...