angular.js auto complete select option does not trigger other models

Question

I have an array with data, and an array with settings. I pass the data into an HTML table and I build a select for every row. I need to offer an auto-complete option from the settings array, according to each row's 'lookFor' value. Not quite there yet, but very easy with some array.filter implementation. My problem is that pressing the 'auto' button does not update the span with its model {{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>

JohnPan · Accepted Answer · 2014-11-01 22:07:34Z

1

Wow, half an hour sleep and restart thinking did it! It was quite simple really. My mistake was that I though that changing the model would trigger the 'changed' event, but no!

Code to fix it (with the missing 'find the default setting' feature)

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

answered Nov 1, 2014 at 22:07

JohnPan

1,21013 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular.js auto complete select option does not trigger other models

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related