Angularjs可编辑下拉菜单( ng-repeat
AngularJS是一种流行的前端开发框架，它提供了丰富的功能和工具，使开发人员能够构建交互性强、响应迅速的Web应用程序。在AngularJS中，ng-repeat是一个指令，用于在HTML模板中循环遍历一个集合，并为每个元素生成相应的HTML代码。
可编辑下拉菜单是指用户可以在下拉菜单中选择一个选项，同时也可以手动输入自定义的选项。在AngularJS中，可以通过结合ng-repeat和ng-options指令来实现可编辑下拉菜单的功能。
下面是一个示例代码，演示了如何使用AngularJS创建一个可编辑下拉菜单：
HTML模板：
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedOption" ng-options="option for option in options">
<option value="">自定义</option>
</select>
<input type="text" ng-model="customOption" ng-show="selectedOption === ''">
</div>JavaScript控制器：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.options = ['选项1', '选项2', '选项3'];
$scope.selectedOption = '';
$scope.customOption = '';
$scope.$watch('selectedOption', function(newValue) {
if (newValue === '') {
$scope.customOption = '';
}
});
});在上述代码中，我们首先定义了一个包含选项的数组options，然后使用ng-options指令将这些选项绑定到下拉菜单中。同时，我们在下拉菜单中添加了一个额外的选项“自定义”，当用户选择该选项时，会显示一个文本输入框，用户可以在其中输入自定义的选项。
这只是一个简单的示例，实际应用中可编辑下拉菜单可能会涉及更复杂的逻辑和样式。根据具体需求，可以进一步扩展和定制这个功能。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我一直试图创建数据驱动的级联下拉菜单与Angularjs为我的图表。以下是我到目前为止所得到的
Year:
<select id="YearSelector">
<option ng-repeat="year in filterOptions.stores">{{year.year}}</option>
</select>
Quarter:
<select id="QuarterSelector">
<option ng-repeat="quarter in f
浏览 3提问于2016-09-27得票数 0
回答已采纳
目前，我正在使用select for dropdown。我想将其更改为多选下拉菜单。但是当我声明multiselect下拉菜单时，我得到的错误是“未知属性选项”。
当前的代码只是一个不带multiselect的下拉列表。
<select class="form-control"> <option ng-repeat="item in CETIGroupList" value="{{item}}">{{item}}</option>
浏览 4提问于2016-06-10得票数 0
在bootstrap 3和angularjs中，我有一个列表组，对于每个项目，我都有一个向右拉出的下拉列表:当我点击下拉菜单时，我希望只显示下拉菜单，但点击的事件会传播到该项目
<div ng-repeat="item in items" href="" class="list-group-item" ng-click="itemSelected(item)">
{{item.Name}}
<div class="dropdown pull-right" >
<
浏览 0提问于2015-04-25得票数 2
我需要为我的下拉菜单加载默认值。
第一个下拉列表
<select class="form-control pz" ng-model="newuser.title">
<option ng-repeat="x in titles" value="{{x}}">{{x}}</option>
</select>
第一个下拉列表的数据
$scope.titles = ["MR","MRS","MS"];
我需要在第一个下拉菜单中加载&#
浏览 0提问于2020-02-27得票数 0
我想通过下拉菜单将筛选条件传递给ng-repeat
<select class="form-control" ng-model="currentlySelected" ng-change="DropDownChnaged()">
<option value ="">All</option>
<option value="| filter : {deleted_at: null}">Active</option>
<option
浏览 0提问于2018-07-25得票数 2
回答已采纳
我的应用程序有一个显示国家的多选下拉菜单。此下拉菜单在Chrome中显示正常，在IE中显示如下选项：
我正在使用以下代码(尝试将select中的值更改为ng-value，但不起作用)-
HTML
<select multiple name="multiCountries" ng-model="vm.country.countryList">
<option ng-repeat="option in vm.country.filteredList" value="{{option.value}}"&
浏览 29提问于2018-06-06得票数 1
回答已采纳
我有一个角格式，它包含字段行，其中每一行都是ng-repeat块：
<form name="myForm><table>
<tr class="item-row" ng-repeat="item in items">
<td>
<input type="text" ng-model="item.width" ng-change="processItem(item)">
</td>
<td>
<
浏览 1提问于2014-08-08得票数 3
回答已采纳
使用AngualrJS，根据下拉列表中的ng-repeat值列出油井选项。我如何知道在像这样的多选下拉菜单中选择了哪个选项：
<select custom-select ng-model="selectedEmp" data-container="body" multiple="">
<option value="{{ emp._id }}" ng-repeat="emp in employeeList">
{{ emp.first_name }} {{ emp.la
浏览 0提问于2018-03-09得票数 0
0回答
我似乎在使用AngularJS为select下拉菜单设置默认值时遇到了问题。我在StackOverflow上读过类似的话题，但没有一个建议的解决方案对我有效，所以我决定最后请教你们:)
基本上，我想在我的应用程序中实现一个条目编辑功能。因此，用户单击编辑按钮，就会弹出一个模态，其中包含一个表单，其中的值是从传递给模态控制器的对象填充的。我指的是所有的值，但我希望以下拉选择的形式显示“类别”。
我认为在代码中显示会更容易，所以我准备了这个小提琴：
var myApp = angular.module('myApp', []);
function MyCtrl($scope)
浏览 6提问于2017-11-29得票数 1
回答已采纳
你好，我遇到了一个烦人的问题，我无法解决。我用AngularJs来显示一堆卡片，每个卡片都有自己的下拉菜单。
下面是代码：
<div ng-repeat="feedback in feedbacks"
class="card">
<div class="cardMoreActionsButton">
<a class="dropdown-button"
dropdown
href="#"
浏览 1提问于2017-10-17得票数 1
回答已采纳
1回答
我想更新位于主视图之外的指令中的作用域，下面是我的代码：
index.html
<!-- the directive I want to update -->
<nav sitepicker></nav>
<section id="content-wrapper">
<!-- main content-->
<div ui-view></div>
</section>
sitepicker本质上只是一个下拉菜单，其中包含一些html结构。
sitepick
浏览 3提问于2016-06-04得票数 0
2回答
正在尝试折叠移动引导导航栏中的下拉菜单(语言选择)。第一次点击时，带有语言的下拉菜单打开良好，更改语言后，下拉语言菜单关闭，但当我再次尝试更改语言时，我必须双击下拉菜单才能打开。有人能帮我吗？
<li class="dropdown" dropdown style="margin-top: 25%; left: 7.5%;">
<a href="#" class="dropdown-toggle" dropdown-toggle role="button" ng-c
浏览 10提问于2018-04-25得票数 0
下面的代码依次显示了所有的div：
<ul class="record">
<li id="{{record.id}}" ng-repeat="record in records">
<div> Widget Code.... </div>
</li>
</ul>
除此之外，我在右边的下拉菜单中有以下可点击的列表菜单：
<li ng-repeat="choice in items">
<a href="
浏览 0提问于2013-04-18得票数 1
回答已采纳
我正在将数据从实体框架/sql视图加载到我的应用程序前端的下拉菜单中。 我能够调用服务器端方法并成功地验证结果是否包含我需要的数据。 我在访问数据数组的元素时犯了一个错误，我打算用它来填充下拉菜单。在我完成执行之后，下拉菜单显示"unidefined“37次，这是GET返回的记录数。 这是我在Chrome开发者工具中看到的： ? 如您所见，我将data.data分配给我的$scope.MeetingListarray。 在html视图中，我尝试使用$scope.MeetingListas的内容如下： <div>
浏览 18提问于2020-08-26得票数 0
我在下面的代码中使用了ng-repeat和md-select。但它不起作用，下拉菜单显示为空。如果我在div或html中使用ng-repeat，选择它就可以了。请看下面的内容：
角形：-
<div class="col-xs-12 formClass" ng-controller="dropDownController">
<md-input-container class="formClass">
<label>Impacts</label>
<md-select n
浏览 0提问于2016-03-07得票数 0
我见过许多使用JSON数据填充选择下拉菜单选项的angularjs示例，但经过多次尝试和变体之后，我仍然得到了一个空白下拉菜单。我肯定我的对象命名规则有问题，因为所有的角度示例都很混乱(什么是复数？什么不是？等)如果你能提供任何帮助，我们将不胜感激。
JSON示例：
{"fields":[
{"state": "OH",
"gender": "male"},
{"state": "OH",
"gender": "female"},
{"
浏览 7提问于2016-05-09得票数 0
回答已采纳
假设我有如下标记(在隔离作用域之前)：
<div class="myApp">
<div class="bulletins" ng-repeat="bulletin in myApp.bulletins" bulletins>
<div class="posts" ng-repeat="post in bulletin.posts" posts>
<div class="comments" ng-repeat=
浏览 1提问于2014-08-14得票数 0
回答已采纳
我有来自服务器的歌曲对象，我通过ng-repeat通过AngularJS从服务器获取，我可以这样填充一个丑陋的下拉列表：
<select name="songs" ng-model="songs">
<option ng:repeat="x in songs" value="{{x.artist}}">{{x.artist}} - {{x.title}}</option>
</select>
但是当我有一个图形效果很好的bootstrap下拉菜单时，它
浏览 3提问于2015-03-06得票数 0
这就是我的问题：
我有一个DIV，你有4个字段:2个dropdowns和2个inputtext。
其中3个字段由对象数组上的ng-repeat填充：
$scope.ddList = [
{
code: 1253,
name: "test13",
supervisor: "cas3",
overseer: "cas32",
kstTextColor: "#000",
kstBackgroundCol
浏览 1提问于2018-05-08得票数 0
我们有一个从ng-重复派生的项目列表，每个项目都可以单击ng-单击.
这些项可能包含表单元素和或ui.bootstrap.dropdown元素。
在iPad safari和chrome上，点击下拉菜单不会打开菜单，输入框不会打开键盘，尽管有时会短暂地打开。
以前有人遇到过这个吗？
缩小的示例如下所示
<div ng-repeat="item in model.items" ng-click="selectItem(item)">
<input type="text" />
<div class=&#
浏览 3提问于2015-01-07得票数 0
回答已采纳
1回答
我在学习天使语。我想在我的引导网站上使用两种不同的菜单结构。
One是带有下拉菜单的，另一个是没有下拉菜单的.
在我的代码下拉菜单中运行良好。但我不知道如何在没有下拉结构的情况下实现菜单链接。我不想使用ui.bootstrap和棱角材料库。
app = angular.module("myapp", []);
app.controller("MainController", function($scope, $http) {
$scope.menus = [
{
title: "Menu1",
action: "
浏览 1提问于2019-02-15得票数 2
回答已采纳
我希望有一种方法可以实现这一点。我正在使用ng-repeat创建dropdowns；创建的dropdowns的数量取决于我从数据库检索的数据。根据数据，我想为每个下拉菜单设置一个初始选项值。考虑以下代码：
<span class="finds" ng-model="cond" ng-repeat="condin list">
<select ng-model="selected_item" ng-options="condition.name for condition in conditionType
浏览 1提问于2014-02-27得票数 1
我正在尝试"stopPropagation“，以防止当点击安莉内部的元素(链接)时，Twitter Bootstrap导航栏下拉菜单关闭。使用这种方法似乎是常见的。
在Angular中，看起来像是一条指令是做这件事的地方？所以我有：
// do not close dropdown on click
directives.directive('stopPropagation', function () {
return {
link:function (elm) {
$(elm).click(fun
浏览 0提问于2013-01-27得票数 76
回答已采纳
我是"angularjs“的新手。 我需要给下拉列表的边框，并设置下拉列表内容的字体大小。我试着用下面的方式来设计样式，但它不起作用- <md-input-container style="font-size:11px;font-family:verdana;border-width:2px;border-color:darkgray">
<md-select ng-model="anfcntrl.selbndlegalentities" multiple="">
<md-option ng-v
浏览 48提问于2020-01-10得票数 0
回答已采纳
1回答
我是AngularJS的新手，因此对如何将复选框或多选下拉菜单绑定到单独的列表感到困惑。
<body ng-controller="FooListCtrl">
<span ng-repeat="foolist in foos">
<select ng-model="selected" ng-options="foo for foo in foolist" multiple="">
</select>
</span>
</bod
浏览 0提问于2013-05-20得票数 4
回答已采纳
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<title>Document</title>
</head>
<body ng-app="m
浏览 0提问于2017-09-27得票数 0
1回答
我正试着制定一个时间表。从API中收到的对象如下：
schedule : {
id,
name,
shifts : []
}
// each shift is
shift : {
id,
schedule_id,
user,
tasks: []
}
// each task is
task: {
id,
shift_id,
time_start,
time_end
}
我的HTML当前是(请看下面的图片，了解它现在的样子)
<div class="schedule">
浏览 4提问于2014-07-16得票数 0
回答已采纳
我有个Umbraco装置。当我在CMS中编辑时，我希望只要DOM中没有文本编辑器，“预览”按钮就会消失。
localtion Umbraco/Views/content/edit.html中的Angular文件
<form novalidate name="contentForm"
ng-controller="Umbraco.Editors.Content.EditController"
ng-show="loaded"
ng-submit="save()"
val-form-ma
浏览 62提问于2020-02-13得票数 1
回答已采纳
我有一个连接到数据库的简单AngularJS表单。
该表单在HTML表中显示姓名和出生国家的列表：
<table class="table table-bordered" style="max-width: 100%;" id="myAreas">
<tr ng-repeat="name in Names">
<td>{{name.FullName}}</td>
<td>
浏览 0提问于2017-08-18得票数 0
1回答
我已经知道了如何用角填充数据库中的第一个下拉菜单，但是我仍然停留在如何抓取第一个下拉框的选定值来查询以填充第二个框。另外，如果数据位于单独的表中，那么每次选择下拉列表时，我是否都必须进行API调用？我已经看到了很多用预置表来做这件事的例子，但是没有使用实际的api调用。这就是我困惑的地方。
这是我现在所拥有的。
app.controller('SelectOptGroupController', function($scope,$http) {
$http.get('api2.php').
success(function(dat
浏览 0提问于2015-06-13得票数 1
回答已采纳
如何使用ng-repeat在angularjs中仅对动态生成的表的最后一行禁用拖放排序？我使用的是jquery ui sortable。我希望最后一行的位置应该只固定在最后一个位置。此外，当用户在向表中添加内容的同时添加行时，表行是动态增长的。先谢谢你...
浏览 2提问于2017-06-26得票数 0
现在，我正在尝试为select下拉菜单设置默认值。但无法将其删除，代码如下：
<div class='paymentmethods subcontent' ng-switch on="editpaymentmethod">{{editselection.selectedmethod=Memethods[paymethodindex]}}// This gives me what I need,but select doesn't. confused?
<select ng-model='editselec
浏览 1提问于2015-02-27得票数 0
我正在尝试创建一个下拉列表，它包含子菜单。但是子菜单没有显示。我的代码如下所示。如果有什么差错，请告诉我。
<div class="dropdown ">
<span class="dropdown-toggle glyphicon glyphicon-option-vertical" data-toggle="dropdown"></span>
<ul class="dropdown-menu pull-right ">
<li clas
浏览 0提问于2018-05-22得票数 0
所有我都使用AngularJS ng-repeat绑定数据，现在我尝试在AngularJS中使用editable-select实现级联，但它不会起作用，任何人都无法帮助解决这个问题。
我的要求是我需要两个落水者一个是国家的，第二个是国家的。
当我选择国家/地区下拉菜单时，只需要加载那些与国家/地区相关的州。
我怎样才能使用以上所有的技术呢？
在这里，我附加了jsfiddle 。
浏览 5提问于2017-03-14得票数 1
我有一个dropdown和ng-repeat数据。当页面加载时，我想隐藏ng-repeat，并基于对dropdown数据的选择，我想显示ng-repeat。界面如下：
<div class="row">
<div class="col-sm-2">
<label class="control-label">Seasons :</label>
</div>
浏览 13提问于2017-01-13得票数 0
回答已采纳
这是单选择下拉，我想让它多选择下拉，我使用multiple and class="custom-select"在select，但它显示打开的选择菜单，但我想显示下拉时，我点击下拉时，如果可能的话，帮助复选框类型的多重选择下拉菜单在引导和安古拉杰？
Type:
<select class="form-control" ng-model="list.type">
<option value="" disabled selected>Select Type</option>
<opt
浏览 0提问于2019-07-20得票数 1
我正在使用angularjs，并且我有一个包含用ng-repeat动态创建的行和列的表。每个单元格都有一个包含ng-include的指令。在处理单元格的内容时，将终止ng-repeat，并暂时显示带有空单元格的表。我想阻止页面查看，直到所有角度处理都已完成。有可能吗？
我加载行和列以加载表，例如：
<table>
<tr ng-repeat="row in rows">
<td ng-repeat="col in cols">
<my-directive row="row
浏览 0提问于2018-03-06得票数 0
1回答
在我正在工作的项目中，我正在通过Angular在待办事项列表上应用ui-sort，并试图在用户编辑任务时进行切换。我目前测试这个开关的方法是使用一个按钮来打开和关闭排序。
我的策略是:使用一个angular指令来生成一个初始模板，并对其进行排序。添加一个按钮，当单击该按钮时，将修改控制器($scope.sortingEnabled)中的范围变量，以在true和false之间切换。在我的指令中，我在链接函数中的'sortingEnabled‘上设置了一个监视，以便在
这是我尝试使用指令之前的in todo.html : sortableOptions是一个用来对内部记录上的待办事项进行重
浏览 0提问于2013-07-18得票数 0
回答已采纳
我有一个带有输入字段的下拉菜单来搜索我的li元素。问题是:每当我单击输入字段放入搜索查询，单击事件就会发生，下拉菜单就会消失。
--我在输入字段上尝试了preventDefault，但是它没有工作。我怎样才能阻止这种行为？
下面是一个柱塞：
下面是我的标记(它是带有ng-model=“customerFilter”的输入)：
<div class="button">
<a class="btn btn-large grey dropdown-toggle" data-toggle="dropdown" href="#
浏览 1提问于2013-10-19得票数 2
回答已采纳
我的HTML中有下拉菜单：
<div class="dropdown">
<button class="dropdown-toggle" type="button" data-toggle="dropdown" ng-model="yearName">Sort by year
<span class="caret"></span></button>
<ul class="
浏览 0提问于2017-10-15得票数 0
1回答
因此，我有一个AngularJS函数，当调用它时，应该将一个列表元素添加到DOM中的div中，并且该列表应该是ng-repeat的，这样它就可以迭代列表中的对象。
列表中的这些对象包含一些我想打印出来的属性。
AngularJS程序的一部分
var el = angular.element(document.getElementById('categories'));
el.append('<ul id="' + categoryItemStr + '"><li ng-repeat="item in catego
浏览 0提问于2017-10-01得票数 0
如何在AngularJS中处理大型ng-repeat集合？
我正在考虑一旦用户决定切换到另一个控制器，就取消下载过程。
要显示我使用的图像：
<ul class="thumbnails">
<li ng-repeat="photo in photosFound.data track by $index" >
<a prettyp class="thumbnail" ng-href="{{domain}}/{{photo.thumb}}" rel="prettyPhoto
浏览 4提问于2016-02-11得票数 5
4回答
这是我的JS：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{
"name": "john",
"params": {
"age": 22,
"weight": 66
}
},
{
"name":
浏览 0提问于2018-05-29得票数 0
我有一个文本区域，它依赖下拉菜单来填充。当下拉列表被更改时，文件将被拉出，内容被加载到文本区域。
当textarea正在加载时，它只是表示[object Object]。我希望它能比这更好一点。就像“装.”。
不过，我找不到专门用文本区域来完成这个任务的方法。
另一个麻烦在于，save功能实际上依赖于要保存的文本区域的值，所以我不能仅仅更改文本区域的内容来显示“保存.”。否则，写入文件的内容就是“保存.”。
以下是代码：
视图
<div id="Options" class="panel-collapse collapse">
<div
浏览 1提问于2017-10-12得票数 0
回答已采纳
1回答
我正在创建一个功能:在使用AngularJS单击按钮时，我从服务器调用一些JSON数据。
如果没有按钮功能，下面的代码正在工作：
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller=&
浏览 1提问于2015-02-09得票数 0
回答已采纳
我使用的是角度材质，我被困在多选下拉菜单中，我选择了多个选项，在ng-change上，我调用了函数，该函数将获得每个选项的id，我将比较API id，但当我选择它时，将在函数中提供数据，就像在第一个选项选择123456中的第二个选项选择123456,456231中一样。
在第三选项选择123456,456231,471258中
所以每当我比较它的时候，它只进入条件里面一次，而且不会更多，即使我试图拆分它，也会给出错误，什么也不做。
<md-select ng-model="$parent.follower" placeholder="Select Person&#
浏览 0提问于2015-07-14得票数 1
我的下拉菜单有问题。我已经将它设置为在单击时填充-但当它不能正常呈现时。请参阅所附图片()。需要再次单击才能展开下拉菜单。
这是我的HTML代码：
<div class="form-group" ng-show="system.properties[0].value.target.connection.target_type === 'hive'">
<label class="col-sm-3 control-label" for="sdb">Da
浏览 0提问于2017-04-08得票数 0
1回答
所以我需要处理这个json文件：
我试图为每个版本的链接数组中的每个条目制作一个单独的选择下拉菜单。因此，基本上每个版本都应该在select下拉菜单中添加2个条目(一个用于windows，一个用于linux)。
但是，我失败了，因为它为每个版本创建了一个select元素。我不能在select语句中添加另一个ng-重复，所以我对如何实现这一点感到有点困惑。我一直在摆弄各种选项和其他东西，但没能让它发挥作用。
以下是当前的实现：
代码: index.html
<!-- Algorithmic Trading © -->
<!doctype html>
浏览 4提问于2015-03-03得票数 0
回答已采纳
我正在尝试编辑包含选择下拉菜单的表格。为此，我对angularjs使用了xeditable。我的HTML文件包含：<td><span editable-select="awsendpoint.organizationName" e-name="organizationName" e-form="rowform" e-ng-options="organization.organizationName for organization in getallorganization">{{awsendpoint.o
浏览 12提问于2018-02-10得票数 0
实际上，我在一个指令的编译函数中使用了两个模板。我在指令的编译阶段一次性编译它们(通过$compile)。在指令的链接阶段，我观察了一个作用域变量，并将一个或另一个已编译的模板应用于该作用域。
testApp.directive('testField', ['$compile', function ($compile) {
return {
restrict: 'E',
scope: true,
compile: function(tElement, tAttrs) {
var viewFn = $comp
浏览 1提问于2015-08-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
