Essayer d'afficher une valeur de colonne à partir d'une collection de grilles basée sur une autre valeur de cette même ligne. L'utilisateur peut sélectionner/modifier des valeurs dans un modal qui contient une grille avec des valeurs. Lorsque le modal se ferme, les valeurs sont retransmises. À ce moment, je voudrais définir une valeur pour 'Aussi connu comme':
html:
Also known as: <input type="text" `ng-model="displayValue(displayNameData[0].show,displayNameData[0].value)">`
J'ai créé une fonction sur la portée pour sélectionner la valeur uniquement lorsque la valeur "show" est vraie:
$scope.displayValue = function (show, val) {
if (show) {
return val;
}
else {
return '';
}
}
Cependant, lorsque je ferme le modal, j'obtiens une erreur:
Error: [ngModel:nonassign] Expression 'displayValue(displayNameData[0].show,displayNameData[0].value)' is non-assignable.
référence plnkr: http://plnkr.co/edit/UoQHYwAxwdvX0qx7JFVW?p=preview
Comme HackedByChinese l'a mentionné, vous ne pouvez pas lier ng-model à une fonction, alors essayez comme ceci:
<input type="text" ng-if="displayNameData[0].show"
ng-model="displayNameData[0].value">
Ou si vous voulez que ce contrôle soit visible, vous pouvez créer une directive, ajoutez une fonction à $parsers
qui définira une valeur vide selon 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">
Utiliser ng-value au lieu de ng-model a fonctionné pour moi.
Vous pouvez lier ng-model
pour fonctionner
Liaison à un getter/setter
Parfois, il est utile de lier ngModel à une fonction getter/setter. Un getter/setter est une fonction qui renvoie une représentation du modèle lorsqu'il est appelé avec zéro argument et définit l'état interne d'un modèle lorsqu'il est appelé avec un argument. Il est parfois utile de l'utiliser pour les modèles qui ont une représentation interne différente de ce que le modèle expose à la vue.
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;
}
};
}]);