dynamic分配模型
我试图从一个对象数组中生成一组checkbox。 我打算让checkboxdynamic地将其ng模型映射到将被提交到数组中的新对象的属性。
我想到的是类似的东西
<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]">
这是一个工作plunk： http ://plnkr.co/edit/ALHQtkjiUDzZVtTfLIOR? p= preview
编辑正如在注释中指出的那样，使用ng-change需要事先提供一个“虚拟”ng模型。 然而，应该指出的是，显然在1.3的框架下提供了所需的选项。 请查看下面的https://stackoverflow.com/a/28365515/3497830 ！ /编辑
以防万一你像我在一个简单的情况下陷入了一个更复杂的任务，这是我想出了dynamic绑定任意expression式ng-model的解决scheme： http ： //plnkr.co/edit/ccdJTm0zBnqjntEQfAfx？p =预览
方法：我创build了一个指令dynamicModel，它接受一个标准的angular度expression式，对它进行求值并通过ng-model和$ compile将结果链接到作用域。
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); }); } }; }]);
用法简单地是dynamic-model =“angularExpression”其中angularExpression导致用作ng模型的expression式的string。
我希望这可以节省一些人不得不想出这个解决scheme的头痛。
问候，Justus
使用Angular 1.3，可以使用ng-model-options指令来dynamic分配模型，或绑定到expression式。
这里是一个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 }">
有关ngModelOptions更多信息， ngModelOptions访问： https ： ngModelOptions
这是我支持深层expression的方法，例如'model.level1.level2.value'
<input class="form-control" ng-model="Utility.safePath(model, item.modelPath).value">
其中item.modelPath ='level1.level2'和Utility（model，'level1.level2'）是返回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>
