CODEWITHSUNDEEP
javascriptangularjshtml-select
JohnPan
JohnPan

Reputation: 1210

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

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>

Upvotes: 0

Views: 232

Answers (1)

JohnPan
JohnPan

Reputation: 1210

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

Upvotes: 1

Related Questions