Question

我是Angularjs的新手。我想做的就是这样。我有一个输入字段，用户输入一个数字。然后生成一个下拉列表，其中选项的数量应该等于用户输入的数量。这是我的代码：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.addqty = function() {
    var i;
    for (i = 0; i < $scope.quantity; i++) {
      $scope.choices = i;
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  Enter quantity: <input type="text" ng-model="qauntity" />
  <button ng-click="addqty()">Add</button>

  <fieldset data-ng-repeat="choice in choices">
    <select>{{choices}}</select>
  </fieldset>
</div>

Answer 1

尝试这样的事情：

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.choices = [];
  $scope.quantity = 0;

  $scope.addqty = function() {
    $scope.choices = [];
    for (i = 0; i < $scope.quantity; i++) {
      $scope.choices.push(i)
    }
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  Enter quantity: <input type="number" ng-model="quantity" />
  <button ng-click="addqty()">Add</button>

  <div>
    <select>
      <option ng-repeat="choice in choices">
        {{choice}}
      </option>
    </select>
  </div>
</div>

＆＃13;

您有一个空数组，然后当您单击该按钮时，一定数量的项目等于输入的数量被推入数组，而数组又用于填充选择。 I在这种情况下，认为输入中的type="number"更合适，以确保用户不使用文本而不是数字。

$scope.choices = [];在重新开始填充之前将数组重置为空，以防有人多次点击该按钮。

如果你想稍微调整一下并使整个事情变得更整洁，你可以在select-tag周围添加<div ng-show="choices.length > 0">。这将确保只有在数组中至少有一个项目时才会呈现下拉列表。

剩下要做的就是确保您可以继续使用所选的值：

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.choices = [];
  $scope.quantity = 0;
  $scope.selected;

  $scope.addqty = function() {
    $scope.choices = [];
    for (i = 0; i < $scope.quantity; i++) {
      $scope.choices.push(i)
      $scope.selected = $scope.choices[0];
    }
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  Enter quantity: <input type="number" ng-model="quantity" />
  <button ng-click="addqty()">Add</button>

  <div ng-show="choices.length > 0">
    <select ng-model="selected">
      <option ng-repeat="choice in choices">
        {{choice}}
      </option>
    </select>
  </div>

  <div ng-show="choices.length > 0">
    <label>Selected value: {{selected}}</label>
  </div>
</div>

＆＃13;

Answer 2

angular.module('app', []).controller('ctrl', function($scope){
  $scope.show = function(){
    $scope.array = [];
    for(var i = 0; i < $scope.quantity; i++)
      $scope.array.push(i + 1);
    $scope.selected = $scope.array[0];
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='ctrl'>
  <input type='number' ng-model='quantity' />
  <input type='button' ng-click='show()' value='Create' />
  </br>
  <select ng-model='selected' ng-options="item for item in array">
  </select>
</div>

Answer 3

您可以在范围内创建一个对象数组，在addqty函数中，您可以将对象推送到该数组，该数组包含您希望用户查看的值和文本。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.choises = [];
  
  $scope.addqty = function() {
    var i;
    for (i = 0; i < $scope.quantity; i++) {
      $scope.choises.push({value:i,text:'text'});
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  Enter quantity: <input type="text" ng-model="quantity" />
  <button ng-click="addqty()">Add</button>


<div ng-show="choises.length > 0">
  <select>
  <option 
    value="{{choise.value}}" 
    ng-repeat="choise in choises">
    {{choise.text}}
  </option>
 </select>
</div>

</div>

Answer 4

通过隐藏“新建”下拉列表直到没有分配任何值来做得更好：

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.choices = [];
  $scope.quantity = 0;

  $scope.addqty = function() {
    $scope.choices = [];
    for (i = 0; i < $scope.quantity; i++) {
      $scope.choices.push(i)
    }
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  Enter quantity: <input type="number" ng-model="quantity" />
  <button ng-click="addqty()">Add</button>

  <div>
    <select ng-show="choices.length">
      <option ng-repeat="choice in choices">
        {{choice}}
      </option>
    </select>
  </div>
</div>

＆＃13;

Answer 5

您不必编写任何javascript函数来执行此操作。您可以使用array.constructor方法并传递相应的输入数值来实现该功能。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl"> Enter quantity:
    <input type="number" ng-model="quantity" />
    <button ng-click="val=quantity">Add</button>
    <div ng-if="val!=undefined">
        <select>
            <option value="{{$index+1}}" ng-repeat="x in [].constructor(val) track by $index"> {{$index+1}} </option>
        </select>
    </div>
</div>

Angularjs：根据用户输入填充下拉列表

5 个答案: