ng-options AngledJSを使用して特定の選択フィールドに入力フィールドを追加する方法

AngularとNode/Express/Mongoを使用してポーリングアプリケーションを作成していて、「カスタムオプションを追加しますか」を選択すると、カスタム入力フィールドを追加してオプションを追加したいと考えています。私は投票オプションを生成するためにng-optionsを使用しています。ng-options AngledJSを使用して特定の選択フィールドに入力フィールドを追加する方法

世論調査のHTMLは次のようになります。（世論調査では、データベースから取得し、$ scope.poll.optionsに追加されます。投票は$ scope.poll.voteとIに接続されている

<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>

あなた自身のアンケートでログインしているユーザー：ドロップダウンからカスタムオプションを選択すると、空白の入力フィールドが表示されます。オプションを追加してください。私はそのコードが何のためにあるべきか、何らかの示唆を理解できませんか？

例えばそう

：

私に投票したいと思います：

オプション1
オプション2
オプション3
私は>は

出典

2016-08-29 chemook78

ここでは、更新可能なウォッチ機能を使用して、カスタムドロップダウンアイテムを特定のテキスト入力フィールドにバインドできます提出されたデータを動的にドロップする。

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

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

<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>

出典

2016-08-29 09:42:57

ng-options AngledJSを使用して特定の選択フィールドに入力フィールドを追加する方法

答えて

関連する問題