Angular: How to populate a dynamic array for select using ngOptions? - arrays

Question

Ideally, I want to populate the array via computed property. For example,
Object.defineProperty(MyObj.prototype, 'linkedList', {
get: function () {
var list = [];
this.dataList.forEach(function (cs) {
if (cs !== this) {
list.push(cs.name);
}
});
return list;
}
});
However, if I used this computed property as select options like
<select data-ng-model="name" data-ng-options="g for g in myObj.linkedList"></select>
I will get this error:
Error: 10 $digest() iterations reached. Aborting!
In fact, I still get this error even if I return a fixed list like:
Object.defineProperty(MyObj.prototype, 'linkedList', {
get: function () {
return ['test1', 'test2'];
}
});
However, it is okay if I return a static array:
MyObj._linkedList = ['test1', 'test2'];
Object.defineProperty(MyObj.prototype, 'linkedList', {
get: function () {
return MyObj._linkedList;
}
});
I also tried to use a filter in the ngOptions and the same error is thrown. Why and How?
UPDATE:
As it turns out, my original question above doesn't truly reflect the problem, because the problem happens only if I use a directive. To simplify the question, I removed the directive part.
Anyway, in my directive, I have
scope: {
name: '=',
isEditing: '=',
isHidden: '=',
options: '='
}
<div>
<div data-ng-hide="!isHidden" style="background-color: lightgrey"> </div>
<div data-ng-show="!isEditing && !isHidden">{{name}}</div>
<select class="select-input" data-ng-show="isEditing && !isHidden" data-ng-model="name" data-ng-options="g for g in {{options}}"><option value=""></option></select>
</div>
Here is how to use it:
<td><ms-table-select-cell name="myObj.link" is-editing="myObj.isEditing" options="myObj.linkedList" /></td>
This is how the error occurs. If I directly use the select tag with ngOptions, it's not a problem.

Answer 1

I think the problem is that your 'get' property is called at each loop.
You can try to assign the variable value once and then loop on it.
<select data-ng-model="name" data-ng-options="g for g in myArray = myObj.linkedList"></select>

Answer 2

In your first case every time angular calls myObj.linkedList it gets a new object, so angular repeatedly begin new digest cycle and does it untill the number of iterations exceeds 10 - than it throw an error "10 $digest() iterations reached".
To avoid this you must construct your code so that every call to the myObj.linkedList returns the same object.
Try to move the var list = []; expression out of the Object.defineProperty call.
I prepared 2 fiddles:
fiddle 1 - with the Error
fiddle 2 - without the Error and with tiny modification.
Compare them.
Hope it will help you