2014-11-01 3 views
0

데이터가있는 배열과 설정이있는 배열이 있습니다. HTML 테이블에 데이터를 전달하고 모든 행에 select를 작성합니다. 각 행의 'lookFor'값에 따라 설정 배열에서 자동 완성 옵션을 제공해야합니다. 아직은 아니지만 일부 array.filter 구현은 매우 쉽습니다. 내 문제는 '자동'버튼을 누르면, 그 모델 {{row.comment}}angular.js 자동 완성 선택 옵션이 다른 모델을 트리거하지 않습니다.

<!DOCTYPE html> 
<html> 

<head> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script> 

<script> 
var myApp = angular.module('myApp', []); 

myApp.controller('myctrl', myctrl); 

function say(w) {console.log(w);} 

function myctrl($scope){ 

    $scope.settingsArr = [ 
     {title:"text1", def:3, comments:"1 rewf"}, 
     {title:"text2", def:2, comments:"2 fdsf"}, 
     {title:"text5", def:5, comments:"5 fdfd"} 
    ]; 

    $scope.rows = [ 
     {text:"row1 bdsfsffd sad", lookfor:2, desc:"desc_row1"}, 
     {text:"row2 dsf sdf", lookfor:52, desc:"desc_row2"}, 
     {text:"row3 dsf as", lookfor:5, desc:"desc_row3"}, 
     {text:"row4sdfa df", lookfor:3, desc:"desc_row4"}, 
     {text:"row5 fds", lookfor:21, desc:"desc_row5"}   
    ]; 

    $scope.selectionChanged = function (row){ 
     //say(row); 
     row.thecomment = row.selectData.comments; 
    }; 

    $scope.autoSelection = function() { 
     var autoSelect = function autoSelectFn(row){  
      row.selectData = $scope.settingsArr[0]; 
     } 

     $scope.rows.map(autoSelect); 
    }; 
} 
</script> 

</head> 

<body ng-app="myApp"> 
<div ng-controller="myctrl"> 

    <table border="1"> 
    <tr> 
     <th>text</th> 
     <th>lookfor</th> 
     <th>description</th> 
     <th>actions</th> 
    </tr> 
    <tr ng-repeat="row in rows"> 
     <td>{{row.text}}</td> 
     <td>{{row.lookfor}}</td> 
     <td>{{row.desc}}</td> 
     <td> 
      <select ng-model="row.selectData" 
      ng-options="item.title for item in settingsArr" 
      ng-change="selectionChanged(row)"> 
      </select> 
     <span ng-model="row.thecomment">{{row.thecomment}}</span>   
     </td> 
    </tr>   
    </table> 

    <button type="button" ng-click="autoSelection()">Auto</button> 
</div> 


</body> 
</html> 

답변

1

와우와 반 시간의 수면을 스팬을 업데이트하고 그것을 한 사고 다시 시작하지 않는다는 것입니다! 정말로 아주 간단했습니다. 내 실수는 내가 모델을 변경하면 '변경된'이벤트가 트리거되지만 그럴 수는 없다는 것입니다.

코드

$scope.autoSelection = function() { 
    var thisRow; 
    var getDefault = function getDefaultFn(settingRow){ 
     if (settingRow.def == thisRow.lookfor) return true; 
     return false; 
    } 
    var autoSelect = function autoSelectFn(row) { 
     thisRow = row; 
     var filteredSettings = $scope.settingsArr.filter(getDefault); 
     if (filteredSettings.length) { 
      row.selectData = filteredSettings[0]; 
      $scope.selectionChanged(row); 
     } 
    } 
    $scope.rows.map(autoSelect); 
}; 
(누락 된 '기본 설정을 찾아'기능을 사용하여) 그것을 해결하기 위해
관련 문제