2013-04-19 3 views
0

HTML 셀렉트 요소를 사용하여 열거 된 값이있는 엔티티의 필드를 표시합니다.Angular ng-repeat를 사용하여 select 요소에서 onselect를 여러 번 호출

페이지 내에서 엔티티에 대한 여러 필드가 있으므로 여러 개의 선택 요소가 있습니다.

내 테이블 행의 ng-repeat 내에 select를 작성하여 Angular 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/

행운을 빕니다. 우린 모두 너를 믿고있어.

답변

0

onselect 속성이란 무엇입니까? Angular interpolation을 사용하여 onselect 속성을 바인딩했기 때문에 fireSelectEvent이 여러 번 발생했습니다.

내가 추측하고있어 당신이 원하는 것은 : ng-change="fireSelectEvent(prop.name)"

업데이트 된 바이올린 : http://jsfiddle.net/utgwG/2/

+0

아, 그래! 그것은 완벽하게 작동했습니다. 고마워. – Sparm