2014-11-01 60 views
0

我有一个包含数据的数组和一个包含设置的数组。我将数据传递给一个HTML表格,并为每一行构建一个选择。我需要根据每行的'lookFor'值从settings数组中提供一个自动完成选项。还不是很完美,但使用一些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); 
}; 
相关问题