Question

我有一个json对象，我需要遍历json并将值显示给模型。 json的键与ng-model值相同。我能够获得密钥和值。我只需要将它传递给输入..

下面是我的代码。

controller.js

var supplierStorage = {"key1":"value1", "key2":"value2", "key3":"value3"};

for (var i = 0; i <= Object.keys(supplierStorage).length-1; i++) {
    $scope.Object.keys(supplierStorage)[i] = supplierStorage.Object.keys(supplierStorage)[i];  
}

HTML

<input ng-model="key1">

<input ng-model="key2">

<input ng-model="key3">

感谢。

Answer 1

我认为您不必使用for循环将所有项目分配到范围元素。试试这个：

角：

var supplierStorage = {"key1":"value1", "key2":"value2", "key3":"value3"};
$scope.supplierStorage = supplierStorage;

HTML：

<input ng-model="supplierStorage.key1">

<input ng-model="supplierStorage.key2">

<input ng-model="supplierStorage.key3">

Answer 2

试试这个，

var supplierStorage = {"key1":"value1", "key2":"value2", "key3":"value3"};

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

Answer 3

只需将键克隆到范围

var supplierStorage = {"key1":"value1", "key2":"value2", "key3":"value3"};

for(p in supplierStorage) { 
   $scope[p] = supplierStorage[p];
}

Answer 4

你可以使用关键的值方法，使用ng-repeat，如下所示

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-repeat="(k,v) in supplierStorage">
      <input type="text" ng-model="v"/>
    </div>
  </body>
<script>
  var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
 
  $scope.supplierStorage = {"key1":"value1", "key2":"value2", "key3":"value3"};
});

</script>
</html>

这里我将值绑定到输入，如果你想绑定键替换v与k

Answer 5

试试这个。不需要循环。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

    <script>
        var app = angular.module("MyTestApp", []);
        app.controller("myCtrl", function ($scope) {
            var supplierStorage = {
                "key1": "value1",
                "key2": "value2",
                "key3": "value3"
            };

            $scope.DataArray = supplierStorage;
        });
    </script>

    <div ng-app="MyTestApp" ng-controller="myCtrl">
            <input ng-model="DataArray.key1"/>
            <input ng-model="DataArray.key2"/>
            <input ng-model="DataArray.key3"/>
    </div>


</body>

</html>

Answer 6

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
     <div ng-app="myApp" ng-controller="myCtrl">
        <div ng-repeat="(key, value) in supplierStorage">
         {{key}} : <input type="text" ng-model="data[key]"/> {{data[key]}}
        </div>
    </div>
    </body>

    <script type="text/javascript">
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
          $scope.supplierStorage = {"key1":"value1", "key2":"value2",               "key3":"value3"};
});


    </script>
    </html>

AngularJS：循环遍历JSON并将值传递给ng-model

6 个答案: