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 / 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 !topic/angular/Pef6LY2rT7g with no success, and another search turned up this .js/pull/1328 which is equally unhelpful to me.
Any help will be highly appreciated.
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/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./forum/#!topic/angular/Pef6LY2rT7g with no success, and another search turned up this https://github./angular/angular.js/pull/1328 which is equally unhelpful to me.
Any help will be highly appreciated.
Share Improve this question asked Jul 22, 2013 at 17:21 adeelxadeelx 6051 gold badge7 silver badges14 bronze badges 2-
2
You've got a bug in your
getTextfunction.for/inloops don't work like that in JavaScript. You'd need to change the if statement toif (record.inner[nested].id === 1) {. Either way, that won't fix your whole problem. It might be better to describe what you're trying to do and not how you're trying to do it. For example, if you're just trying to let the user edit [0] or [1] after clicking an Edit button, it would be better/easier, in Angular, to have separate fields that you show/hide. – Langdon Commented Jul 22, 2013 at 17:42 -
Thank you @Langdon for catching the mistake, I normally avoid the
for/inloops so I'm a bit rusty. I'm following Dan Wahlin's guide to Angular JS and I was trying to remake the customer app referenced in the presentation when it occurred to me to try this and since it should have worked as per the links I cited. I thought it must be something I'm doing wrong. I'm just exploring the directives at the moment, that's where the question came from. :) – adeelx Commented Jul 22, 2013 at 18:48
1 Answer
Reset to default 11Anything 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/z5z9s/