Błąd: [ngModel: nonassign] Wyrażenie jest nieprzenoszalne

Question

Próba wyświetlenia wartości kolumny z kolekcji grid opartej na innej wartości w tym samym wierszu. Użytkownik może wybierać/zmieniać wartości w modalu, który zawiera siatkę z wartościami. Kiedy modal się zamyka, wartości są przekazywane z powrotem. W tym momencie chciałbym ustawić wartość dla „znany również jako”:

html:

Also known as: <input type="text" `ng-model="displayValue(displayNameData[0].show,displayNameData[0].value)">` 

stworzyłem funkcję w zakresie, aby wybrać wartość tylko wtedy, gdy wartość „Show” jest prawdziwe:

$scope.displayValue = function (show, val) { 
    if (show) { 
     return val; 
    } 
    else { 
     return ''; 
    } 
} 

jednak kiedy zamknąć modal pojawia się błąd:

Error: [ngModel:nonassign] Expression 'displayValue(displayNameData[0].show,displayNameData[0].value)' is non-assignable. 

odniesienie plnkr: http://plnkr.co/edit/UoQHYwAxwdvX0qx7JFVW?p=preview

Answer 1

Jak wspomniano HackedByChinese, nie można wiązać NG-model funkcji, więc spróbuj tak:

<input type="text" ng-if="displayNameData[0].show" 
        ng-model="displayNameData[0].value"> 

Albo jeśli chcesz tej kontroli mają być widoczne można utworzyć dyrektywę, aby dodać funkcję $parsers że ustawi pustą wartość według 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"> 

Answer 2

Używanie dla mnie wartości ng zamiast modelu ng.

Answer 3

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