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

Question

I am making a polling app using Angular and Node/Express/Mongo and would like to add a custom input field to add an option, when you select "I would like to add a custom option". 我正在使用Angular和Node / Express / Mongo开发一个轮询应用程序，并且当您选择“我想添加自定义选项”时，想添加一个自定义输入字段来添加一个选项。 I'm using ng-options to generate the voting options. 我正在使用ng-options生成投票选项。

The HTML of the poll looks like this now: (poll is retrieved from database and added to $scope.poll.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>

A vote is attached to $scope.poll.vote and I use that to hit an EditPoll controller that talks to an API to update database. 投票附加在$ scope.poll.vote上，我使用它来命中与API对话以更新数据库的EditPoll控制器。

If you are a logged in user + at your own poll: you can select a custom option from the dropdown and that shows a blank input field to add an option. 如果您是通过自己的投票方式登录的用户+：您可以从下拉菜单中选择一个自定义选项，并显示一个空白输入字段以添加选项。 I can't figure out what the code should be for that, any suggestions??? 我无法弄清楚应该使用什么代码，有什么建议吗？？？

So for example: 因此，例如：

I would like to vote for: 我想投票：

Option1 选项1
Option2 选项2
Option3 选项3
I would like a custom option > shows a blank input field below 我想要一个自定义选项>在下面显示一个空白输入字段

Answer 1

Here you can bind custom drop down item with specific text input field using watch feature we can update drop down filed data dynamically. 在这里，您可以使用监视功能将自定义下拉列表项与特定的文本输入字段绑定，我们可以动态更新下拉列表数据。

 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>

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

问题描述

1 个解决方案

解决方案1
1 2016-08-29 09:42:57

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

问题描述

1 个解决方案

解决方案1 1 2016-08-29 09:42:57

解决方案1
1 2016-08-29 09:42:57