AngularJS: objets imbriqués de définir dynamiquement les noms de modèle

J'ai un tableau contenant les noms de variables, par exemple:

var names = ['address.street','address.city'];

Je veux créer des champs de saisie de ceux-ci, et je suis en utilisant AngularJS. No big deal:

<div ng-repeat="n in names">
    <input type="text" ng-model="data[n]" />
</div>

L'résultant $scope.data objet est:

{
    "address.street" : ...,
    "address.city" : ...
}

Qui, en passant, n'est pas exactement ce que je suis en train de réaliser.
Est-il une syntaxe qui pouvait me conduire à un objet comme le suivant comme résultat?

{
    "address" : {
        "street" : ...,
        "city" : ...
    }
}

Veuillez considérer que je peux avoir encore plus d'un niveau d'imbrication, c'est juste un exemple.

Voulez-vous dire de votre $scope.data est { "address" : { "street" : ..., "city" : ... } }. Il n'est pas clair
Je suis en train de le faire comme vous l'avez écrit

OriginalL'auteur Lorenzo Marcon | 2013-11-21

angularjs javascript

9

Je ne pense pas que les modèles doivent être accessibles de cette manière.

Cependant, ce n'était curieuse question et la solution est un peu amusant.

Le problème est que ng-model nécessite un référence et de la pensée Javascript envoie modifiable des copies d'objets, il n'a pas de par référence de la sémantique et il ne suffit pas de passer un chaîne à ng-model.

Cependant, les tableaux et les objets ont cette propriété. Par conséquent, la solution est de retourner un tableau dont les 0élément th sera le référence pour ng-model. C'est aussi le hacky partie depuis tous vos objets sont maintenant des tableaux avec '1' élément.

L'autre solution serait de revenir à un objet pour chaque cas, au lieu de 1 élément de tableau.

Solution à l'aide d'objets incorporés

Voici la solution à l'aide d'un intégré objet: http://plnkr.co/edit/MuC4LE2YG31RdU6J6FaD?p=preview qui à mon avis est plus agréable.

Donc, dans votre contrôleur:
```
$scope.getModel = function(path) {
  var segs = path.split('.');
  var root = $scope.data;

  while (segs.length > 0) {
    var pathStep = segs.shift();
    if (typeof root[pathStep] === 'undefined') {
      root[pathStep] = segs.length === 0 ? { value:  '' } : {};
    }
    root = root[pathStep];
  }
  return root;
}
```
Et dans votre modèle:
```
<p>Hello {{data.person.name.value}}!</p>
<p>Address: {{data.address.value}}</p>
<input ng-model="getModel('person.name').value" />
<input ng-model="getModel('address').value" />
```
Solution à l'aide d'un seul élément de la matrice de

Ici est la plus courte (quoique hacky) solution qui me vient en tête: http://plnkr.co/edit/W92cHU6SQobot8xuElcG?p=preview

Donc, dans votre contrôleur:
```
$scope.getModel = function(path) {
  var segs = path.split('.');
  var root = $scope.data;

  while (segs.length > 0) {
    var pathStep = segs.shift();
    if (typeof root[pathStep] === 'undefined') {
      root[pathStep] = segs.length === 0 ? [ '' ] : {};
    }
    root = root[pathStep];
  }
  return root;
}
```
Et dans votre modèle:
```
<p>Hello {{data.person.name[0]}}!</p>
<p>Address: {{data.address[0]}}</p>
<input ng-model="getModel('person.name')[0]" />
<input ng-model="getModel('address')[0]" />
```
Je vois les efforts que vous faites, et merci pour l'explication détaillée. C'est proche, mais les données de sortie de l'objet serait différent du format, je suis à la recherche d' (vous pouvez le voir dans ma question). Compte tenu des restrictions que j'ai, peut-être le vôtre est le seul moyen viable, dans ce cas, je doute avoir de post-traiter à nouveau l'objet résultant de la transformer dans le format que j'ai besoin.
Merci pour l'acceptation de la réponse. Je ne rends compte que ce n'est pas la solution que tu voulais, mais c'était un problème intéressant de réfléchir de toute façon. Vous avez mon (+1) pour le plaisir. 🙂

OriginalL'auteur musically_ut
7

La réponse fournie par @musically_ut est bonne, mais a une lacune importante:
Il sera parfait si vous êtes en train de créer un nouveau modèle, mais si vous avez un pré-définis modèle existant que vous ne pouvez pas refactoriser dans le".la valeur de la structure ou de la structure du tableau, puis vous êtes coincé...

Clairement qui a été le cas pour moi... (et je suppose que ce fut le cas pour @LorenzoMarcon trop, car il est ce qui implique qu'il devra "post-traitement", le résultat et de le transformer en un autre format)

J'ai fini par élaborer sur @musically_ut la solution:
```
    $scope.getModelParent = function(path) {
      var segs = path.split('.');
      var root = $scope.data;

      while (segs.length > 1) {
        var pathStep = segs.shift();
        if (typeof root[pathStep] === 'undefined') {
          root[pathStep] = {};
        }
        root = root[pathStep];
      }
      return root;
    };

    $scope.getModelLeaf = function(path) {
      var segs = path.split('.');
      return segs[segs.length-1];
    };
```
(notez le changement dans l'indice de boucle)

Plus tard, vous accéder à la dynamique du champ comme ceci:
```
<input ng-model="getModelParent(fieldPath)[ getModelLeaf(fieldPath) ]"/>
```
L'idée est, comme l'explique @musically_ut de réponse) que JS ne peut pas passer une chaîne de caractères par référence, de sorte que le hack autour d'elle, je passe le nœud parent (d'où le tout en boucle à l'intérieur de 'getModelParent' arrête avant le dernier index) et l'accès au nœud feuille (à partir de 'getModelLeaf') à l'aide d'un tableau, par exemple la notation.

Espérons que cela a du sens et de l'aide.

OriginalL'auteur roy650
1

Si vous pouvez restructurer vos modèles, vous pouvez simplement faire comme ceci:

Contrôleur
```
$scope.names = {
    "address":[
        "street",
        "city"
    ]
};

$scope.data = {
    address:{
        street:"",
        city:""
    }
};
```
HTML
```
<div ng-repeat="(key, values) in names">
    <div ng-repeat="value in values">
        <input type="text" ng-model="data[key][value]" />
    </div>
</div>
```
À partir de la question: "imaginez-vous que je peux avoir encore plus d'un niveau d'imbrication, c'est juste un exemple."
Nous avons imbriqué ng-repeats dans ce cas.
En effet, il y a de meilleures façons d'aborder le problème, mais ce problème lui-même est un curieux. 🙂
Merci pour la réponse, je cherchais un moyen de le faire sans changer le modèle initial de la matrice. En outre, certains éléments n'ont pas pu nidification (p. ex. nom) certains autres peuvent avoir un ou plusieurs (par exemple l'adresse.de la rue), mais je ne sais pas à l'avance, de sorte que cette solution est assez limité pour mon cas

OriginalL'auteur AlwaysALearner

Pour faciliter l'analyse des chemins d'accès, vous pouvez également vérifier lodash méthodes :

_.get($scope, 'model.nested.property', 'default');   
_.set($scope, 'model.nested.property', 'default');   
_.has($scope, 'model.nested.property');

https://lodash.com/docs#get

OriginalL'auteur Adrian H

Vous devez vous connecter pour publier un commentaire.

Solution à l'aide d'objets incorporés

Solution à l'aide d'un seul élément de la matrice de

Contrôleur

HTML