Première tentative pour obtenir des données json et les lier à mon formulaire en utilisant AngularJS. Je suis capable de lier le json de cette façon, mais cela nécessite de faire correspondre manuellement les "données" à chacun de mes éléments dans mon html.

Appel http depuis mon contrôleur:

  $http.get('static.json').
    success(function(data, status, headers, config) {
      // here I have to manually copy all my json to bind with "data"
      $scope.SiteID = data.SiteID;
      $scope.SiteCode = data.SiteCode;
  }).
  error(function(data, status, headers, config) {
    // log error
  });

Mon json:

{
  "SiteID":"mySiteIDGoesHere",
  "SiteCode":"mySiteCodeGoesHere"
}

Existe-t-il un moyen de lier automatiquement mon json sans avoir à parcourir chaque élément manuellement? par exemple:

  $http.get('static.json').
    success(function(data, status, headers, config) {
      "just pull in whatever my json is and bind it"
      $scope.WhateverIsInJSONID = data.WhateverIsInJSONID;
      $scope.WhateverIsInJSONCode = data.WhateverIsInJSONCode;
  }).
  error(function(data, status, headers, config) {
    // log error
  });
0
simple 21 juil. 2015 à 21:14

4 réponses

Meilleure réponse

Dans votre fonction de réussite, liez vos données à $ scope.data comme ceci:

$scope.data = data

Ensuite - dans votre html, tous vos ng-modèles, ng-valeurs, etc. seraient liés comme tels:

<p>{{data.someKey}}</p><img ng-src="data.imgSrc" />....

En outre, il n'est pas sûr d'attacher de nombreuses clés de manière arbitraire à la portée. Et je ne parle pas des .data occasionnels ou de tout ce qui est ajouté à la portée. Mais lorsque vous itérez aveuglément un objet et attachez chaque clé à $ scope, vous risquez d'écraser une autre clé qui peut déjà être définie ou la clé de votre paramètre être remplacée plus tard dans le contrôleur. Vous avez peut-être une fonction attachée à la portée qui est remplacée par l'affectation aveugle, ou vice versa.

1
Brant 21 juil. 2015 à 18:22

Non. En mode angulaire, vous devez mettre les données dans la portée ($ scope) une par une à l'intérieur du contrôleur, puis vous pouvez y accéder en HTML soit {{blah}} ou utiliser la directive ng-models, ng-values, etc.

-2
Arpit 21 juil. 2015 à 18:26

Comme mentionné, vous pouvez simplement définir un élément sur le $scope à data puis le référencer en utilisant la notation par points, comme:

$scope.data = data;

Puis:

<span>{{data.WhateverIsInJSONID}}</span>

Si vous voulez que chaque propriété sur le $scope individuellement, vous devrez les parcourir et les ajouter, quelque chose comme:

for (var property in data) {
  if (data.hasOwnProperty(property)) {
    $scope[property] = data[property];
  }
}

Ce qui vous donnerait $scope.WhateverIsInJSONID et $scope.WhateverIsInJSONCode

1
Tom 21 juil. 2015 à 18:19

Vous pouvez simplement définir $scope.data = data; ...

Ensuite, selon vous, vous pouvez accéder à data.SiteID, ou data.SiteCode, etc.

1
Daniel Cottone 21 juil. 2015 à 18:15