2016-10-20 8 views
0

配列の合計数に1のリストを持つselect要素を作成しようとしています。どのようにng-options式を構造化して、必要な番号を私に与えるか?私はそれが私の選択のようなドロップダウン値(配列数の範囲)を取得する方法は?

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

JSコードを作成するためにはNG-オプション式に配置する必要が何をすべきか

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

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

関連する問題