Question

我一直在处理这个问题很长一段时间。我目前有一个名为“add（）”的函数，它允许我将项添加到提供下拉列表和文本字段的数组中。每次我向数组添加一个新项目时，我都将其添加为空：

$scope.aAnimals.push({"animal": ""})

这会导致下拉列表出现问题，因为“animal”的值等于“”

<Option style="display: none" value=""> Select an animal </option>

然后未添加该项目。 “animal”和第一个选项的下拉值都是空字符串。如果你为“animal”添加一个值，除了“”这里它会起作用并且会被添加到下拉列表中。

我能做什么？我希望生成的文本字段为空，下拉列表会添加项目。

 <select class="form-control" ng-model='obj.animal' id='animal' name='animal'  
    ng-options="opt as opt.animal for opt in aAnimals  track by opt.animal">
          <option style="display:none" value="">Select an animal</option>
  </select>

  <div ng-repeat='item in aAnimals'>
    <input type='text' value={{item.animal}} class='animal' />
  </div>


 $scope.obj = {}
 $scope.aAnimals=[{ "animal": "cat"},{ "animal": "dog"}]

 $scope.add=function(){
   $scope.aAnimals.push({ "animal": ""})
 }

http://plnkr.co/edit/PRDp3a1bDJKtRmGR9GMY?p=preview

Answer 1

让我验证你需要什么。当用户单击“添加”按钮时，将在页面中创建一个新的空文本框，并在下拉列表中创建一个新的空选项。当用户更改文本框中的值时，下拉选项将更改。

在这种情况下，您需要像这样修改代码。

<select class="form-control" ng-model='obj.animal' id='animal' name='animal'  
  ng-options="opt as opt.animal for opt in aAnimals">
  <option style="display:none" value="">Select an animal</option>
</select>

<div ng-repeat='item in aAnimals'>
  <input type='text' class='animal' ng-model='item.animal' />
</div>

我删除了track by opt.animal，就像Pankas所说的那样，并添加ng-model='item.animal'，因为我们使用AngularJS双向绑定，所以也不需要value={{item.animal}}。

Answer 2

您的代码运行正常，只需在选项

中删除display none即可

 <option  value="">Select an animal</option>

我看到你在保存功能中使用了jquery。我们有内置角度的jqlite。请检查以下代码以进行保存。

 var length = $scope.aAnimals.length;
 $scope.aAnimals[length-1].animal = 
 angular.element(document).find('.animal').eq(length-1).val();

将项添加到angular.js中的下拉列表和文本字段

2 个答案: