同じ行の別の値に基づいてgridcollectionからcolumnvalueを表示しようとしています。ユーザーは、値を持つグリッドを含むモーダルで値を選択/変更できます。モーダルが閉じると、値が返されます。その時点で、「別名」の値を設定したいと思います。
html:
Also known as: <input type="text" `ng-model="displayValue(displayNameData[0].show,displayNameData[0].value)">`
「show」値がtrueの場合にのみ値を選択するスコープで関数を作成しました。
$scope.displayValue = function (show, val) {
if (show) {
return val;
}
else {
return '';
}
}
しかし、モーダルを閉じるとエラーが発生します:
Error: [ngModel:nonassign] Expression 'displayValue(displayNameData[0].show,displayNameData[0].value)' is non-assignable.
plnkrリファレンス: http://plnkr.co/edit/UoQHYwAxwdvX0qx7JFVW?p=preview
HackedByChineseが述べたように、ngモデルを関数にバインドすることはできませんので、次のようにしてください。
<input type="text" ng-if="displayNameData[0].show"
ng-model="displayNameData[0].value">
または、このコントロールを表示したい場合は、ディレクティブを作成し、show
に従って空の値を設定する$parsers
に関数を追加できます。
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">
Ng-modelの代わりにng-valueを使用するとうまくいきました。
ゲッター/セッターへのバインド
ngModelをゲッター/セッター関数にバインドすると役立つ場合があります。ゲッター/セッターは、引数なしで呼び出されたときにモデルの表現を返し、引数付きで呼び出されたときにモデルの内部状態を設定する関数です。モデルがビューに公開するものとは異なる内部表現を持つモデルにこれを使用すると便利な場合があります。
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;
}
};
}]);