javascript - How to add an input field to specific select field with ng-options AngularJS? -
i making polling app using angular , node/express/mongo , add custom input field add option, when select "i add custom option". i'm using ng-options generate voting options.
the html of poll looks now: (poll retrieved database , added $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 vote for:</label> <select class="form-control" id="vote" ng-model="poll.vote" ng-options="item.option item.option item in poll.options"> </select> </div> <div class="form-group" ng-show="userid === poll.userid"> <br> <label for="vote">vote 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 attached $scope.poll.vote , use hit editpoll controller talks api update database.
if logged in user + @ own poll: can select custom option dropdown , shows blank input field add option. can't figure out code should that, suggestions???
so example:
i vote for:
- option1
- option2
- option3
- i custom option > shows blank input field below
here can bind custom drop down item specific text input field using watch feature 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 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 item.label item in items track item.id" ng-model="selected"></select> <input ng-model="custom" placeholder="your own option" class="form-control" type="text"> </div> </body> </html>
Comments
Post a Comment