2016-10-20 42 views
0

我想創建一個選擇元素,其中包含數字1到數組總數的列表。如何構造ng-options表達式,以便它能給我所需的數字?如何獲得下拉值(數組的範圍)?

<select ng-model="page" ng-options="???"></select> 

什麼,我需要把在NG選項表達,以便它創建我的選擇一樣

<select> 
    <option value="1">1</option> 
    ... 
    <option value="array length">array length</option> 
</select> 

JS代碼:

$scope.arrayName= 
    { 
     "ABC": [{ 
     "id": "a33e777fdc444222bfa7fab2baec17a0", 
     "name": "music & store", 
     "isDeletionAllowed": false, 
     "isDeleted": false, 
     "isEnabled": false, 
     "language": "en" 
    }, { 
     "id": "9896710e6ac6454c96ec29e9a83355e4", 
     "name": "music class", 
     "isDeletionAllowed": false, 
     "isDeleted": false, 
     "isEnabled": false, 
     "language": "en" 
    }, { 
     "id": "b65ab7e3fdc24e23851ffb2e940ff00f", 
     "name": "music store", 
     "isDeletionAllowed": false, 
     "isDeleted": false, 
     "isEnabled": false, 
     "language": "en" 
    }, { 
     "id": "2a5e218ae77c4d6683ecea35266ccc24", 
     "name": "net & store", 
     "isDeletionAllowed": false, 
     "isDeleted": false, 
     "isEnabled": false, 
     "language": "en" 
    }, { 
     "id": "f63b1cd96abb4f42962267af43dfe935", 
     "name": "rock & class", 
     "isDeletionAllowed": false, 
     "isDeleted": false, 
     "isEnabled": false, 
     "language": "en" 
    }, 
    "totalCount": 6 
} 

回答

1

事情是這樣的:

JS

 var app = angular.module('plunker', []); 

     app.controller('MainCtrl', function($scope) { 

      $scope.arrayName= 
      { 
       "ABC": [{ 
      "id": "a33e777fdc444222bfa7fab2baec17a0", 
      "name": "music & store", 
      "isDeletionAllowed": false, 
      "isDeleted": false, 
      "isEnabled": false, 
      "language": "en" 
      }, { 
      "id": "9896710e6ac6454c96ec29e9a83355e4", 
      "name": "music class", 
      "isDeletionAllowed": false, 
      "isDeleted": false, 
      "isEnabled": false, 
      "language": "en" 
      }, { 
      "id": "b65ab7e3fdc24e23851ffb2e940ff00f", 
      "name": "music store", 
      "isDeletionAllowed": false, 
      "isDeleted": false, 
      "isEnabled": false, 
      "language": "en" 
      }, { 
      "id": "2a5e218ae77c4d6683ecea35266ccc24", 
      "name": "net & store", 
      "isDeletionAllowed": false, 
      "isDeleted": false, 
      "isEnabled": false, 
      "language": "en" 
      }, { 
      "id": "f63b1cd96abb4f42962267af43dfe935", 
      "name": "rock & class", 
      "isDeletionAllowed": false, 
      "isDeleted": false, 
      "isEnabled": false, 
      "language": "en" 
      }], 
      "totalCount": 6 
     }; 

     function getMyArray(){ 
      var arr = Array.apply(null, Array($scope.arrayName.totalCount)); 
      return arr.map(function (x, i) { return i+1 }); 
     } 

     $scope.myArray = getMyArray(); 
     $scope.page = $scope.myArray[0]; 

     }); 

HTML:

<select ng-model="page" ng-options="o for o in myArray"></select> 

工作Plunkr here

參考文獻:https://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/

http://www.2ality.com/2013/11/initializing-arrays.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

1

您可以使用如下但是我沒有在運行時測試它對數組值的更改。

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.years = ['1900', '1901', '1902', '34333']; 
 
    $scope.newArray = Array.apply(null,$scope.years).map(function (_, i) {return i+1;}); 
 
});
<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 

 
<select ng-model="chosenYear" ng-options="i for i in newArray"></select> 
 
</div> 
 

 

 

 
</body> 
 
</html>