web-dev-qa-db-fra.com

Affecter dynamiquement ng-model

J'essaie de générer un ensemble de cases à cocher à partir d'un tableau d'objets. Je souhaite que les cases à cocher mappent dynamiquement leur modèle-ng sur une propriété du nouvel objet qui sera soumis au tableau.

Ce que je pensais est quelque chose comme

<li ng-repeat="item in items">
    <label>{{item.name}}</label>
    <input type="checkbox" ng-model="newObject.{{item.name}}">
</li>

Cela ne fonctionne pas comme on peut le voir sur ce JSFiddle:

http://jsfiddle.net/GreenGeorge/NKjXB/2/

Quelqu'un peut aider?

javascriptangularjs
78
George Ananda Eman

Cela devrait vous donner les résultats souhaités:

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

Voici un travail en cours: http://plnkr.co/edit/ALHQtkjiUDzZVttfLIOR?p=preview

143
pkozlowski.opensource

EDIT Comme il est correctement noté dans les commentaires, l'utilisation de ceci avec ng-change nécessite la présence préalable d'un "modèle factice". Il convient toutefois de noter qu’apparemment avec 1.3 les options requises ont été fournies par le cadre. Veuillez consulter https://stackoverflow.com/a/28365515/3497830 ci-dessous! / EDIT

Juste au cas où vous êtes comme moi en train de trébucher sur un cas simple tout en ayant une tâche plus complexe, voici la solution que j'ai proposée pour lier dynamiquement des expressions arbitraires à ng-model: http://plnkr.co/edit/ccdJTm0zBnqjntEQfAfx ? p = preview

Méthode: J'ai créé une directive dynamicModel qui prend une expression angulaire standard, l'évalue et lie le résultat à la portée via ng-model et $ 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);
            });
        }
    };
}]);

L'utilisation est simplement dynamic-model = "angularExpression", où angularExpression donne une chaîne utilisée comme expression pour ng-model.

J'espère que cela évitera à quelqu'un le mal à la tête de devoir proposer cette solution.

Cordialement, .__ Justus

23
Justus Wingert

Avec Angular 1.3, vous pouvez utiliser la directive ng-model-options pour assigner le modèle de manière dynamique ou pour vous lier à une expression. 

Voici un exemple: 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 }">

Plus d'infos sur ngModelOptions ici: https://docs.angularjs.org/api/ng/directive/ngModelOptions

6
Rob R

C’est mon approche pour soutenir une expression plus profonde, par exemple. 'model.level1.level2.value'

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

où item.modelPath = 'level1.level2' et Utility (modèle, 'level1.level2') est la fonction d'utilitaire qui renvoie model.level1.level2.

1
Kanit Mekritthikrai

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

0
Arun Kumar Saini