AngularJS:通过JSON循环并将值传递给NG模型

我有一个JSON对象，我需要循环浏览JSON并向模型显示值。JSON的键与NG模型值相同。我能够获得钥匙和值。.我只需要将其传递给输入。

以下是我的代码。

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

谢谢。

我认为您不必使用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">

尝试这个，

var supplierStorage = {"key1":"value1", "key2":"value2", "key3":"value3"};
for (var p in supplierStorage) {
    if( supplierStorage.hasOwnProperty(p) ) {
      $scope[supplierStorage[p]] = supplierStorage[p];
    } 
  }

只是克隆键

var supplierStorage = {"key1":"value1", "key2":"value2", "key3":"value3"};
for(p in supplierStorage) { 
   $scope[p] = supplierStorage[p];
}

您可以使用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>

在这里我将值绑定到输入，如果要绑定键，用k

将V替换为v

尝试一下。不需要循环。

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

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

相关内容

最新更新

热门标签：