Error: [ngModel:nonassign] Expression is non-assignable Error: [ngModel:nonassign] Expression is non-assignable angularjs angularjs

Error: [ngModel:nonassign] Expression is non-assignable


Using ng-value instead of ng-model worked for me.


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;    }  };}]);