Angular: Providing methods to ng-model

Question

I've taken up Angular recently as a learning exercise.

I'd like to pass a method to ng-model or an expression which might evaluate to one.

In this fiddle http://jsfiddle.net/C4aGk/ you'll see that I've hard coded the field as ng-model="record.inner[0].text" and it works, now the thing is, i'd like to replace the hard-coded zero with something that is returned at run-time, selected by a criterion say id = 1.

My HTML code:

<div ng-controller="MainController" ng-app>
    <div ng-repeat="record in records">
        <input ng-model="record.inner[0].text"> <span>{{record.outer}}</span>
        <div ng-repeat="nested in record.inner">{{nested.id}} - {{nested.text}}</div>
        <hr />
    </div>
</div>
<br/>

and the corresponding js:

function MainController($scope) {
    $scope.records = [{
        outer: "Hello",
        inner: [{
            id: 1,
            text: "Angular"
        }, {
            id: 2,
            text: "jQuery"
        }]
    }, {
        outer: "World",
        inner: [{
            id: 1,
            text: "Node.js"
        }, {
            id: 2,
            text: "Underscore.js"
        }]
    }];

    $scope.getText = function (record) {
        var index = 0;
        for (nested in record.inner) {
            if (nested.id === 1) {
                return "record.inner[" + index + "].text";
            }
            index++;
        }
    };

I've tried placing ng-model="getText(record)" as per https://groups.google.com/forum/#!topic/angular/Pef6LY2rT7g with no success, and another search turned up this https://github.com/angular/angular.js/pull/1328 which is equally unhelpful to me.

Any help will be highly appreciated.

Answer 1

Anything that you pass into ng-model is evaluated as an angular expression against the scope. That means that record.inner[0].text is evaluated as $scope.record.inner[0].text and then the result of that expression is used. When you use getText(record), angular evaluates $scope.getText(record) and ng-model gets access to the result of this evaluation. Keep in mind that ng-model does not evaluate the result of this function call.

Your problem is that you are returning the result as an angular expression string, but never evaluating it, so ng-model is given a string that it cannot use. There are lots of ways to redesign your code to deal with this, but the simple (and probably not best) way would be to use something like ng-init to get the result of the function call and then insert that result into the ng-model. See this fiddle for a quick example http://jsfiddle.net/z5z9s/