使用angularJS綁定從api選擇

我想填充選擇使用ng選項從webapi獲取數據。使用angularJS綁定從api選擇

基本上，我的WebAPI返回以下JSON：

{ 
    "items":[ 
     { 
     "name":"X", 
     "id":1 
     }, 
     { 
     "name":"Y", 
     "id":2 
     } 
    ] 
}

，我需要生成顯示名稱屬性中選擇選項，而是用id作爲值。

問題是我無法使用ng-options顯示我的選項。這裏就是我想：

<html ng-app='app'> 
<head> 
    <title>angular</title> 
</head> 
<body ng-controller='DemoCtrl'> 
    <select ng-model="selectedTestAccount" ng-options="option.name for option in testAccounts"> 
     <option value="">Select Account</option> 
    </select> 
    <script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script> 
    <script> 
     angular.module('app', []).controller('DemoCtrl', function ($scope, $http) { 
      $scope.selectedTestAccount = null; 
      $scope.testAccounts = []; 

      $http({ 
       method: 'GET', 
       url: '/api/values', 
       data: {} 
      }).success(function (result) { 
       console.log(result); 

       $scope.testAccounts = JSON.parse(result.items); 
      }); 
     }); 
    </script> 
</body> 
</html>

來源

2015-12-21 Thiago Custodio

我希望這可以幫助你

angular.module("app", []); 
 
     angular.module("app").controller("ctrl", function($scope) { 
 

 
      $scope.testAccounts = []; 
 

 
      var youJson = [ 
 
       { "items": [{ "name": "X", "id": "your value for X" }, { "name": "Y", "id": "your value for Y" }] }, 
 
       { "items": [{ "name": "A", "id": "your value for A" }, { "name": "B", "id": "your value for B" }] } 
 
      ]; 
 

 
      angular.forEach(youJson, function(items) { 
 
      angular.forEach(items.items, function(item) { 
 
       $scope.testAccounts.push(item); 
 
      }); 
 
      }); 
 

 
      console.log($scope.testAccounts); 
 
     });

<!doctype html> 
 
<html ng-app="app" ng-controller="ctrl"> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <select ng-model="mySelect" ng-options="item.id as item.name for item in testAccounts"></select> 
 
    {{mySelect}} 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script> 
 
</body> 
 

 
</html>

來源

2015-12-21 12:03:53 Maher

差不多，但它並沒有顯示ID作爲選項的值 –

我認爲你是錯的，它會返回你的ID值！只需更改您的選擇選項，您將看到id值 – Maher

使用angularJS綁定從api選擇

回答

相關問題