AngularJS：循環瀏覽JSON並將值傳遞給ng-model

我有一個json對象，我需要遍歷json並將值顯示給模型。 json的鍵與ng-model的值相同。我能得到的關鍵和價值..我只需要通過它到輸入..AngularJS：循環瀏覽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">

感謝。

來源

2016-12-20 Kim Carlo

你爲什麼這樣做'$ scope.Object.keys'？ –

嗨@Daniel_L ..我是新來角和仍然學習JavaScript .. :) –

我不認爲你有使用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">

來源

2016-12-20 06:10:48 zainul

我從來沒有想過這會很容易！謝了哥們！ :) –

高興地幫助:) – zainul

試試這個，

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

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

來源

2016-12-20 06:08:18 azad

簡單地克隆鍵範圍

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

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

來源

2016-12-20 06:13:37

您可以重點用NG-重複值的方法實現這一目標，像下面一樣

<!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="[email protected]" 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替換

來源

2016-12-20 06:16:20

試試這個我值綁定到輸入。不需要循環。

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

來源

2016-12-20 06:17:08 Nitheesh

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

來源

2016-12-20 06:20:32 ishwar

AngularJS：循環瀏覽JSON並將值傳遞給ng-model

回答

相關問題