將項目添加到angular.js中的下拉列表和文本字段中

我一直在處理這個問題很長一段時間。我目前有一個名爲「add（）」的函數，它允許我將項目添加到提供下拉菜單和文本字段的數組中。我每次添加一個新的項目到陣列中，我將其添加空：將項目添加到angular.js中的下拉列表和文本字段中

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

這會導致下拉的一個問題，因爲「動物」的值等於「」

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

然後該項目不被添加。「動物」和第一個選項的下拉值都是空字符串。如果你爲「動物」添加一個值，而不是「」，那麼它將起作用，並將被添加到下拉菜單中。

我能做什麼？我希望生成的文本字段爲空，並且下拉列表添加項目。

<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

來源

2016-12-29 yavg

軌道由'opt.animal'被禁止' 「」'值是出現在'NG-options' –

@PankajParkar對不起，我不明白，原諒我的無知 – yavg

@PankajParkar能做些什麼嗎？ – yavg

讓我確認你所需要的。當用戶點擊添加按鈕時，將在頁面中創建一個新的空白文本框，並在下拉菜單中創建一個新的空白選項。當用戶更改文本框中的值時，下拉選項將改變。

在這種情況下，您需要修改這樣的代碼。

<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'，也不需要value={{item.animal}}，因爲我們使用AngularJS 2路結合。

來源

2016-12-29 04:06:12

是的，但下拉的值，不會是「貓」，「狗」......將是「0」，「1」「，我需要下拉 – yavg

你的代碼是可以正常使用，只是刪除顯示在沒有選擇

<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();

來源

2016-12-29 06:28:42 ravikumar533

中的動物值，但需要用戶選擇一個選項，因爲這是必需的」選擇動物「 – yavg

將項目添加到angular.js中的下拉列表和文本字段中

回答

相關問題