Question

我正在尝试从对象数组生成一组复选框。我的目标是让复选框动态地将他们的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/

有人可以帮忙吗？

Answer 1

这应该会给你想要的结果：

<input type="checkbox" ng-model="newObject[item.name]">

这是一个有效的插件：http://plnkr.co/edit/ALHQtkjiUDzZVtTfLIOR?p=preview

Answer 2

修改正如在评论中正确指出的那样，使用ng-change需要一个＆＃34; dummy＆＃34; ng模型预先存在。然而，应该注意到，显然有1.3，框架提供了所需的选项。请查看下面的https://stackoverflow.com/a/28365515/3497830！的 /修改

为了防止你在一个简单的案例中遇到更复杂的任务而磕磕绊绊，这就是我想出的将任意表达式动态绑定到ng-model的解决方案：http://plnkr.co/edit/ccdJTm0zBnqjntEQfAfx?p=preview

方法：我创建了一个指令dynamicModel，它接受一个标准的角度表达式，对其进行求值，并通过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); }); } }; }]);

用法只是动态模型=＆＃34; angularExpression＆＃34;其中angularExpression产生一个字符串，用作ng-model的表达式。

我希望这能让人不必担心这个解决方案。

此致贾斯特斯

Answer 3

使用Angular 1.3，您可以使用ng-model-options指令动态分配模型，或绑定到表达式。

这是一个傻瓜：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的更多信息：https://docs.angularjs.org/api/ng/directive/ngModelOptions

Answer 4

这是我支持更深层表达的方法，例如'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的实用函数

Answer 5

＆＃13;

<!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>

＆＃13;

动态分配ng-model

5 个答案: