ng-model 동적 할당
개체 배열에서 확인란 집합을 생성하려고합니다. 체크 박스가 ng-model을 배열에 제출 될 새 개체의 속성에 동적으로 매핑하도록하는 것을 목표로하고 있습니다.
내가 염두에 두었던 것은
<li ng-repeat="item in items">
<label>{{item.name}}</label>
<input type="checkbox" ng-model="newObject.{{item.name}}">
</li>
이 JSFiddle에서 볼 수있는 것처럼 작동하지 않습니다.
http://jsfiddle.net/GreenGeorge/NKjXB/2/
아무도 도울 수 있습니까?
원하는 결과를 얻을 수 있습니다.
<input type="checkbox" ng-model="newObject[item.name]">
다음은 작동하는 플렁크입니다. http://plnkr.co/edit/ALHQtkjiUDzZVtTfLIOR?p=preview
편집 ng-change와 함께 이것을 사용하는 주석에서 올바르게 언급했듯이 "더미"ng-model이 미리 존재해야합니다. 그러나 1.3에서는 프레임 워크가 필요한 옵션을 제공 한 것으로 보입니다. 아래 https://stackoverflow.com/a/28365515/3497830을 확인하십시오 ! /편집하다
좀 더 복잡한 작업을하면서 간단한 경우에 걸림돌이되는 저와 같은 경우를 대비하여 임의의 표현식을 ng-model에 동적으로 바인딩하기 위해 고안 한 솔루션입니다. http://plnkr.co/edit/ccdJTm0zBnqjntEQfAfx?p = 미리보기
방법 : 표준 각도 표현식을 사용하여 평가하고 ng-model 및 $ compile을 통해 결과를 범위에 연결하는 dynamicModel 지시문을 만들었습니다.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = {};
$scope.testvalue = 'data.foo';
$scope.eval = $scope.$eval;
});
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = {};
$scope.testvalue = 'data.foo';
$scope.eval = $scope.$eval;
});
app.directive('dynamicModel', ['$compile', function ($compile) {
return {
'link': function(scope, element, attrs) {
scope.$watch(attrs.dynamicModel, function(dynamicModel) {
if (attrs.ngModel == dynamicModel || !dynamicModel) return;
element.attr('ng-model', dynamicModel);
if (dynamicModel == '') {
element.removeAttr('ng-model');
}
// Unbind all previous event handlers, this is
// necessary to remove previously linked models.
element.unbind();
$compile(element)(scope);
});
}
};
}]);
Usage is simply dynamic-model="angularExpression" where angularExpression results in a string that is used as the expression for ng-model.
I hope this saves someone the headache of having to come up with this solution.
Regards, Justus
With Angular 1.3, you can use ng-model-options directive to dynamically assign the model, or bind to an expression.
Here is a plunkr: http://plnkr.co/edit/65EBiySUc1iWCWG6Ov98?p=preview
<input type="text" ng-model="name"><br>
<input type="text" ng-model="user.name"
ng-model-options="{ getterSetter: true }">
More info on ngModelOptions here: https://docs.angularjs.org/api/ng/directive/ngModelOptions
This is my approach to support deeper expression, e.g. 'model.level1.level2.value'
<input class="form-control" ng-model="Utility.safePath(model, item.modelPath).value">
where item.modelPath = 'level1.level2' and Utility(model, 'level1.level2') is the utility function that returns model.level1.level2
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="priceForm" ng-submit="submitPriceForm()">
<div ng-repeat="x in [].constructor(9) track by $index">
<label>
Person {{$index+1}} <span class="warning-text">*</span>
</label>
<input type="number" class="form-control" name="person{{$index+1}}" ng-model="price['person'+($index+1)]" />
</div>
<button>Save</button>
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.price = [];
$scope.submitPriceForm = function () {
//objects be like $scope.price=[{person1:value},{person2:value}....]
console.log($scope.price);
}
});
</script>
</body>
</html>참고URL : https://stackoverflow.com/questions/14183614/dynamically-assign-ng-model
'Development Tip' 카테고리의 다른 글
| 클라이언트 측의 JavaScript require () (0) | 2020.10.05 |
|---|---|
| System.Double을 '0'(숫자, 정수?)과 비교하는 올바른 방법 (0) | 2020.10.04 |
| 파이썬에서 문자열을 바이너리로 변환 (0) | 2020.10.04 |
| Spyder / IPython / matplotlib에서 대화 형 플롯을 다시 얻으려면 어떻게해야합니까? (0) | 2020.10.04 |
| ReferenceError를 던지는 Gulp-autoprefixer : Promise가 정의되지 않았습니다. (0) | 2020.10.04 |