Question

我正在尝试完成一个我正在使用AngularJS的任务，因此我不确定如何实现可能需要的Javascript或者是否有使用AngularJS的方法。

我有这个输入：

<input type="number" ng-model="myCount" ng-disabled="button" min="1" value="1" id="myValue">

此代码获取用户输入的值并将其放在变量中：

$scope.myCount = document.getElementById("myValue").value;

现在，我想要的是基于数字输入，我想要为变量中的数字创建一个数组/对象。例如：

for(i=0;i<myCount.length;i++){
  $scope.trackObject=[
    {name:i + "Objects"}
  ]
}

以下是我想要实现的目标：

<ul class="nav nav-tabs" id="pizza_tabs" role="tablist" ng-repeat="x in countPizzas">
    <li class="active"><a href="#pizza" role="tab" data-toggle="tab">{{x.name}}</a></li>
</ul>

抱歉，我认为我没有很好地解释我想要完成的任务！

我希望有一个包含文本“#Object”的选项卡，对于创建的每个对象，创建的对象数量基于用户输入。那有意义吗？因此，如果用户输入3，那么将创建3个对象，我将能够为其分配名称和其他任何属性。因此创建了3个选项卡供用户切换，其中包含这些属性。我希望有所帮助！

Answer 1

“我想要的是基于数字输入，我想要为变量中的数字创建一个数组/对象”

for(i=0;i<myCount.length;i++){
   $scope.trackObject=[{name:i + "Objects"}]
 }

 //Try this
 var name;
 for(i=0;i<myCount;i++){ //because myCount is a number 
      name = i+"Objects";
      $scope.trackObject.push({name:name}); //add to the array
  }

现在，对于你的最后一段，我不明白你想要在那里完成什么。

Answer 2

我对你的问题感到困惑。

您已经将ngModel设置为myCount，因此输入框中输入的内容将设置为ngModel - 'myCount'

没有必要使用jquery来获取值 “$ scope.myCount = document.getElementById（”myValue“）。value;”

至于第二部分，我相信用户“I_Wrote_That”已经回复了你如何根据输入创建一个对象数组。

Answer 3

首先，angular支持双向数据绑定。因此，您无需使用document.getElementById等手动获取元素的值。

$scope.myCount = document.getElementById("myValue").value;

默认情况下，该值将在myCount中可用。

现在根据计数生成对象：

<ul class="nav nav-tabs" id="pizza_tabs" role="tablist">
    <li class="active"><a href="#pizza" role="tab" data-toggle="tab"  ng-repeat="x in generateCounts(myCount)">{{x.name}}</a></li>
</ul>

现在在您的控制器中：

$scope.generateCounts = function(myCount) {
     $scope.trackObject = [];
     for(var i=0; i < myCount; i++) {
        $scope.trackObject.push({name : i+"objects"});
     }
     return $scope.trackObject;
}

但是这不会起作用，它会给你重复的键错误。

因此，在您的HTML中，请使用track by $index

 <li class="active"><a href="#pizza" role="tab" data-toggle="tab"  ng-repeat="x in generateCounts(myCount) track by $index">{{x.name}}</a></li>

如何在AngularJS中完成此任务？

3 个答案: