Динамічно призначати ng-модель

Question 1

Я намагаюся створити набір прапорців з масиву об'єктів. Я прагну до того, щоб прапорці динамічно зіставляли свою 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/

Хто-небудь може допомогти?

Question 2

Це має дати бажані результати:

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

Ось робочий планк: http://plnkr.co/edit/ALHQtkjiUDzZVtTfLIOR?p=preview

Question 3

РЕДАГУВАТИ Як правильно зазначено в коментарях, використовуючи це за допомогою ng-change, попередньо повинна бути присутня "фіктивна" ng-модель. Однак слід зазначити, що, мабуть, з 1.3 необхідні варіанти були передбачені рамками. Будь ласка, перевірте https://stackoverflow.com/a/28365515/3497830 нижче! / РЕДАКТУВАТИ

На той випадок, якщо ви схожі на мене, спотикаючись про простий випадок, маючи більш складне завдання, це рішення, яке я придумав для динамічного прив’язки довільних виразів до ng-моделі: http://plnkr.co/edit/ccdJTm0zBnqjntEQfAfx?p = попередній перегляд

Метод: Я створив директиву dynamicModel, яка приймає стандартний кутовий вираз, обчислює його і прив'язує результат до області дії за допомогою ng-моделі та $ 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-моделі.

Сподіваюсь, це рятує когось головний біль від необхідності придумувати це рішення.

З повагою, Юсту

Question 4

За допомогою 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

Question 5

Це мій підхід для підтримки глибшого виразу, наприклад, 'model.level1.level2.value'

<input class="form-control" ng-model="Utility.safePath(model, item.modelPath).value">

де item.modelPath = 'level1.level2' та Utility (модель, 'level1.level2') - це функція утиліти, яка повертає model.level1.level2

Question 6

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

Розгорніть фрагмент