CODEWITHSUNDEEP
angularjs
YoroDiallo
YoroDiallo

Reputation: 345

'or', 'and' in ng-model angularjs

I have a list of items, some of them has property value, some has property default. And I need to bind it into the input[text] with ng-repeat.
Array is looks like:

$scope.arr = [
 {value:'name'},
 {value:'dog'},
 {default:'cat'},
 {value:'lastName'},
 {default:'ring'}
];

And in html:

<div ng-repeat='item in arr'>
 <input type='text' ng-model='item.value || item.default'>
</div>

It works, but I have error message in console "[ngModel:nonassign] http://errors.angularjs.org/1.5.8/ngModel/nonassign?p0=item.value%20%7C%7CNaNtem.default&p1=%3Cinput%20type%3D%22text%22%20ng-model%3D%item.value%20%7C%7C%item.default%22%20class%3D%22ng-pristine%20ng-untouched%20ng-valid%22%3E". Because ng-model doesn't work with expression.. Perhaps there is another way to solve it?

Plnkr example

Upvotes: 0

Views: 1298

Answers (3)

Diana R
Diana R

Reputation: 1174

You can do it this way:

<div ng-repeat='item in arr'>
   <input type='text' ng-hide='item.default' ng-model='item.value'>
   <input type='text' ng-show='item.default' ng-model='item.default'>
</div>

Plunker example.

Upvotes: 4

Mihai Pop
Mihai Pop

Reputation: 75

$scope.valueOrDefault = function (item){ return item.value|| item.default; }

and HTML

<div ng-repeat='item in arr'> <input type='text' ng-model='valueOrDefault(item)'> </div>

Upvotes: 0

Ben Bracha
Ben Bracha

Reputation: 1397

You can try to create a second array, using only single type of object and bound it to the view. Then, you can watch for changes and re-assign values to your original array. It is more a MVVM approach (creating a "viewModel") that intermediate between the controller model and the view.

Upvotes: 0

Related Questions