使用Angular ng-repeat从选择元素多次调用onselect答案

【问题标题】：Multiple call to onselect from select element with Angular ng-repeat使用Angular ng-repeat从选择元素多次调用onselect
【发布时间】：2013-04-19 17:17:52
【问题描述】：

我正在使用 HTML 选择元素来显示其中包含枚举值的实体字段。

在页面中，我有多个实体字段，因此有多个选择元素。

我使用 Angular ng-repeat 来显示每个字段，方法是在我的表格行的 ng-repeat 中创建一个选择。当从任何下拉列表中选择一个项目时，我想捕获“onselect”事件，问题是，每当用户在一个下拉列表中选择一个值时，页面上的所有下拉列表都会触发该事件。

我的html：

<div ng-app>
<div ng:controller="TodoCtrl">
    <table>
        <tr ng-repeat="prop in customForm">
            <td>{{prop.legend}}</td>
            <td>
                <select ng-name="prop.name" ng-model="entity[prop.name]"
                        ng-options="val as val for val in prop.enumeratedValues"
                        onselect="{{fireSelectEvent(prop.name)}}"></select>
            </td>
        </tr>
        <tr><td>Calls Made</td></tr>
        <tr ng-repeat="call in callLog">
            <td>{{call}}</td>
        </tr>    
    </table>
</div>
</div>

我的控制器：

//'use strict';
function TodoCtrl($scope) {


    $scope.customForm =
    [
        {name:"aval", legend: "A Value", enumeratedValues: ["1","2","3"], editable: true},
        {name:"bval", legend: "B Value", enumeratedValues: ["4","5","6"], editable: true},
        {name:"cval", legend: "C Value", enumeratedValues: ["7","8","9"], editable: true}
    ];

    $scope.entity = {};
    $scope.callLog = [];

    $scope.fireSelectEvent = function( propName )
    {
        console.log("Prop=" + propName + " value=" + $scope.entity[propName]);


        $scope.callLog.push( propName );        
    }
}

我的小提琴：

http://jsfiddle.net/utgwG/

祝你好运。我们都在指望你。

【问题讨论】：

标签： html select angularjs onselect ng-repeat

【解决方案1】：

onselect 属性是什么？你看到fireSelectEvent 触发了很多次，因为你已经使用Angular interpolation 绑定了onselect 属性。

我猜你想做的是：ng-change="fireSelectEvent(prop.name)"

你更新的小提琴：http://jsfiddle.net/utgwG/2/

【讨论】：