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

Question

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

Diana R · Accepted Answer · 2016-11-04 12:48:28Z

4

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.

edited Nov 4, 2016 at 12:48

answered Nov 4, 2016 at 12:25

Diana R

1,1741 gold badge9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

YoroDiallo Over a year ago

thx! It's good idea, but when value = '' (empty), ng-show will hide this field. So perhaps I need to make some check like ng-show='fieldCheck(item)', and $scope.fieldCheck = function(item) {if('value' in item) return true} - for example..

Diana R Over a year ago

@YoroDiallo Wait a minute, are you interested to show both fields? What is your final result that you expect?

YoroDiallo Over a year ago

yes, I need to paste all objects into input. Every object in array have default or value property, and it can be empty or have some value, but I need to bind it in input.. so when value = '' i can fill it from input (write something in input)

Diana R Over a year ago

I am not really sure I understand what you're trying to do. If you want to have two input fields one for value another for default, then just remove the ng-show. If you want to show one or another whichever is populated, then the solution from my answer.

Diana R Over a year ago

Ah, ok. Now I understand. WIll do a quick update on my answer just now.

|

Ben Bracha · Accepted Answer · 2016-11-04 12:26:24Z

0

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.

answered Nov 4, 2016 at 12:26

Ben Bracha

1,4172 gold badges16 silver badges30 bronze badges

Comments

Mihai Pop · Accepted Answer · 2016-11-04 12:32:58Z

0

$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>

answered Nov 4, 2016 at 12:32

Mihai Pop

751 silver badge5 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related