当 ng-model 在 AngularJS 中更新时 md-select 中的 OnSelect 事件答案

【问题标题】：OnSelect event in md-select when ng-model gets update in AngularJS当 ng-model 在 AngularJS 中更新时 md-select 中的 OnSelect 事件
【发布时间】：2016-08-04 06:15:25
【问题描述】：

当另一个属性发生变化时，我需要更新集合中的一个属性。

我的收藏是

    $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属性...

【问题讨论】：

ng-repeat 默认创建一个新范围。因此，在您的情况下，UpdateMode 函数接收到一个身份不明的参数。你必须重新审视你的架构。

标签： html angularjs html-select angular-material

【解决方案1】：

mdSelect 指令不支持 onselect 事件。使用ngChange：

<md-select ng-model="main.Mode" ng-change="UpdateMode(main)" aria-label="{{main.Name}}">
    <md-option ng-value="1">Good</md-option>
    <md-option ng-value="2">Bad</md-option>
</md-select>

【讨论】：