Error: [ngModel:nonassign] Expression is non-assignable
As HackedByChinese mentioned, you can't bind ng-model to a function, so try like this:
<input type="text" ng-if="displayNameData[0].show" ng-model="displayNameData[0].value">
Or if you want this control to be visible you can create directive, add function to $parsers
that will set empty value according to show
:
angular.module('yourModule').directive('bindIf', function() { return { restrict: 'A', require: 'ngModel', link: function(scope, element, attrs, ngModel) { function parser(value) { var show = scope.$eval(attrs.bindIf); return show ? value: ''; } ngModel.$parsers.push(parser); } }; });
HTML:
<input type="text" bind-if="displayNameData[0].show" ng-model="displayNameData[0].value">
You can bind ng-model
to function
Binding to a getter/setter
Sometimes it's helpful to bind ngModel to a getter/setter function. A getter/setter is a function that returns a representation of the model when called with zero arguments, and sets the internal state of a model when called with an argument. It's sometimes useful to use this for models that have an internal representation that's different from what the model exposes to the view.
index.html
<div ng-controller="ExampleController"> <form name="userForm"> <label>Name: <input type="text" name="userName" ng-model="user.name" ng-model-options="{ getterSetter: true }" /> </label> </form> <pre>user.name = <span ng-bind="user.name()"></span></pre></div>
app.js
angular.module('getterSetterExample', []).controller('ExampleController', ['$scope', function($scope) { var _name = 'Brian'; $scope.user = { name: function(newName) { // Note that newName can be undefined for two reasons: // 1. Because it is called as a getter and thus called with no arguments // 2. Because the property should actually be set to undefined. This happens e.g. if the // input is invalid return arguments.length ? (_name = newName) : _name; } };}]);