如何使用 ng-options AngularJS 将输入字段添加到特定的选择字段？答案

【问题标题】：How to add an input field to specific select field with ng-options AngularJS?如何使用 ng-options AngularJS 将输入字段添加到特定的选择字段？
【发布时间】：2016-08-29 17:42:57
【问题描述】：

我正在使用 Angular 和 Node/Express/Mongo 制作一个投票应用程序，并且想添加一个自定义输入字段来添加一个选项，当您选择“我想添加一个自定义选项”时。我正在使用 ng-options 来生成投票选项。

投票的 HTML 现在看起来像这样：（从数据库中检索投票并添加到 $scope.poll.options：

<div class="container">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="row">
        <div class="col-md-6">
          <h2>
            {{poll.title}}
          </h2>
          <h5>
            Created by: {{poll.displayName}}
          </h5>
          <form>
            <div class="form-group">
              <label for="vote">I would like to vote for:</label>
              <select class="form-control" id="vote" ng-model="poll.vote" ng-options="item.option as item.option for item in poll.options">
              </select>
            </div>
            <div class="form-group" ng-show="userID === poll.userID">
             <br>
               <label for="vote">Vote with my own option</label>
               <input ng-model="poll.vote" placeholder="Your own option" class="form-control" type="text">
            </div>   
            <button type="submit" class="btn btn-primary" ng-click="votePoll(poll)">Vote</button>
          </form>
          </br>
        </div>
        <div class="col-md-6">
          <canvas id="myChart" width="400" height="400">
          </canvas> 
        </div>
      </div>
    </div>
  </div>
 </div>

$scope.poll.vote 附加了一个投票，我用它来点击一个 EditPoll 控制器，该控制器与 API 对话以更新数据库。

如果您是登录用户 + 在您自己的投票中：您可以从下拉列表中选择一个自定义选项，该选项会显示一个空白输入字段以添加选项。我不知道代码应该是什么，有什么建议吗？？？

例如：

我要投票给：

选项1
选项2
选项3
我想要一个自定义选项 > 在下方显示一个空白输入字段

【问题讨论】：

标签： javascript angularjs mongodb

【解决方案1】：

在这里，您可以使用监视功能将自定义下拉项与特定文本输入字段绑定，我们可以动态更新下拉字段数据。

var app=angular.module("myApp",[]);

app.controller("FirstController",function($scope){
	
	
	$scope.items = [{
	  id: 'opt_1',
	  label: 'aLabel',
	  subItem: { name: 'aSubItem' }
	}, 
	{
	  id: 'opt_2',
	  label: 'bLabel',
	  subItem: { name: 'bSubItem' }
	}, 
	{
	  id: 'opt_custom',
	  label: 'I would like a custom option',
	  subItem: { name: 'bSubItem' }
	}];
	
  $scope.checkOptions=function(){
   // alert($scope.selected.id);
    if($scope.selected.id=='opt_custom'){
	$scope.$watch('custom', function(newValue, oldValue) {
		debugger;
		$scope.items[2].id='opt_custom_'+$scope.custom;
		$scope.items[2].label=$scope.custom;
	});
      }
    }
})

<html ng-app="myApp">
<head>
<title>Simple App</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
</head>
<body>
<div ng-controller="FirstController">


<select ng-change="checkOptions()" ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>

 <input ng-model="custom" placeholder="Your own option" class="form-control" type="text">
</div>

</body>
</html>

【讨论】：