[英]Add an Option to Select in Angular
我正在做一個應用程序,其中有一些字段,用戶可以添加帶有新(相同)字段的新行。 我需要讓用戶添加一個option
來select
。 我知道如何在jQuery中進行制作,但無法與Angular集成。 如果看到plnkr代碼
您會看到有一個select
,最后一個是“ +”。 當用戶單擊它時,應該顯示從何處獲取新選項文本的輸入。 這是顯示的代碼,它應該更改類,但是由於輸入類型始終是內聯,所以它不起作用:
$(".new").on("click", function () {
var state = $(this).data('state');
state = !state;
if (state) {
$("new-option").addClass("hide");
} else {
$("new-option").removeClass("show");
}
$(this).data('state', state);
});
這是新選項的代碼:
<div class="new-option">
<label> New Option </label>
<input type="text" data-ng-model="food.newOption">
<button onClick="add()">Add</button>
<script language="JavaScript">
function add() {
var newOption = '<option value="lol">' + $scope.food.newOption + '</option>';
$('.new').append(newOption);
}
有人可以幫我按“ +”鍵更改類,並將填充的輸入添加到新選項中嗎?
謝謝指教!
這是工作示例,我已經更新了您的html和app.js
app = angular.module('Test', []);
app.controller('ProductController', function($scope,$http) {
$scope.foods = [
{
"selectproduct": "",
"Quantity1": "",
"Quantity2": ""
}
];
$scope.options= ['0101003 - Min. Diet pesce 2 Scd' , '0101004 - Min. Maint pesce 4 Scm' , '0101115 - Min. Diet pesce 1.5 Scd']
$scope.cloneItem = function () {
var itemToClone = { "selectproduct": "", "Quantity1": "", "Quantity2": "" };
$scope.foods.push(itemToClone);
}
$scope.removeItem = function (itemIndex) {
$scope.foods.splice(itemIndex, 1);
}
$scope.add = function(food){
$scope.options.push(food.newOption);
food.newOption = '';
}
});
您缺少獲取角度范圍的原因,這就是為什么您無法在列表中追加..
您已經這樣做了-由於它是一種javascript方法,因此您通常無法獲得angular的范圍。 這里沒有$ scope
function add() {
var newOption = "<option value='lol'>" + $scope.food.newOption + " </option>";
$('.new').append(newOption);
}
嘗試使用角度范圍。
function add() {
var $scope = angular.element($(".form-group")).scope();
var newOption = "<option value='lol'>" + $scope.food.newOption + "</option>";
$('.new').append(newOption);
}
首先,您應該像這樣在控制器中編寫add()函數:
app.controller('ProductController', function($scope,$http) {
$scope.foods = [
{
"selectproduct": "",
"Quantity1": "",
"Quantity2": ""
}
];
$scope.add = function(newOption) {
scope.selectOptions.push(newOption);
}
$scope.cloneItem = function () {
var itemToClone = { "selectproduct": "", "Quantity1": "", "Quantity2": "" };
$scope.foods.push(itemToClone);
}
$scope.removeItem = function (itemIndex) {
$scope.foods.splice(itemIndex, 1);
}
});
在html中,您需要使用ng-click屬性:
<button ng-lick="add(food.newOption)">Add</button>
要在angularJS中打印選項,可以使用ng-options屬性(您需要在控制器的selectOptions var中設置其他選項(已加載API?):
<select ng-model="selectItem" ng-options="selectOption in selectOptions">
</select>
您可以在文檔中找到有關此的更多信息: https ://docs.angularjs.org/api/ng/directive/ngOptions
ng-model提供了兩種方式的綁定。 您需要做的就是使用.push()在模型中添加一個元素
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.