angular.js 自动完成选择选项不会触发其他模型答案

【问题标题】：angular.js auto complete select option does not trigger other modelsangular.js 自动完成选择选项不会触发其他模型
【发布时间】：2014-12-28 20:15:59
【问题描述】：

我有一个包含数据的数组和一个包含设置的数组。我将数据传递到 HTML 表中，并为每一行构建一个选择。我需要根据每一行的“lookFor”值从设置数组中提供一个自动完成选项。还没有，但是通过一些 array.filter 实现非常容易。我的问题是按下“自动”按钮不会使用其模型 {{row.comment}}

更新跨度

  <!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>

【问题讨论】：

标签： javascript angularjs select option

【解决方案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);
};

【讨论】：