Question

我有一个包含数据的数组，以及一个包含设置的数组。我将数据传递到HTML表格中，并为每一行构建一个选择。我需要从设置数组中提供一个自动完成选项，根据每一行＆＃39; lookFor＆＃39;值。目前还不完全，但有些array.filter实现非常简单。我的问题是按下自动＆＃39;按钮不会使用其模型{{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>

Answer 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);
};

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

1 个答案: