javascript - How to (1) get selected value from Angular/Bootstrap dropdown and (2) show selected choice? -


i'm trying angular-ui dropdown work: http://angular-ui.github.io/bootstrap

  1. how pass value angular function can process it?
  2. how can display selected choice after user selects instead of showing "please select:"

plunker: http://plnkr.co/edit/1vz8t4nmi39jpdsdxgfd

html:

<!doctype html> <html ng-app="ui.bootstrap.demo"> <head>     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>     <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>     <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>     <script src="script.js"></script> </head> <body>  <div ng-controller="dropdownctrl">     <div class="dropdown">         <button class="btn btn-default dropdown-toggle"            type="button" id="menu1" data-toggle="dropdown" ng-click="toggled">please select:             <span class="caret"></span></button>         <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">             <li role="presentation" ng-repeat="choice in items">                 <a role="menuitem" tabindex="-1" href="#">{{choice}}</a>             </li>         </ul>     </div> </div>  </body> </html>

javascript:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('dropdownctrl', function ($scope, $log) {      $scope.items = ['one','two','three','four'];      $scope.toggled = function(value) {         alert('the value chose ' + value)     };  });

in html, modify code related dropdown add binding text displayed in dropdown (via ng-bind) + execute function when element in dropdown clicked (via ng-click) :

<div class="dropdown">     <button class="btn btn-default dropdown-toggle"        type="button" id="menu1" data-toggle="dropdown" ng-click="toggled" ng-bind='selected'>tutorials         <span class="caret"></span></button>     <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">         <li role="presentation" ng-repeat="choice in items">             <a role="menuitem" ng-click="settutorial(choice)" tabindex="-1" href="#">{{choice}}</a>         </li>     </ul> </div>

then in javascript, add function executed when element in dropdown clicked:

$scope.selected = "tutorial"; $scope.settutorial = function(value) {   $scope.selected = value; }

with function, can:
1. value of item clicked
2. update selected choice.


Comments

Post a Comment

Popular posts from this blog

android - Pass an Serializable object in AIDL -

i have defined aidl file interface imyfeature { void dotask(class clazz); } but need pass class object process. possible in android? if so, how? i tried: interface imyfeature { serializable class; void dotask(class clazz); } but doesn’t work. aidl in android supports custom class implement parcelable interface. in case want send class object not possible. can send class canonical name , retrieve in service. for example have aidl file interface imyfeature { void dotask(string classname); } then call : binder.dotask(myclass.class.getcanonicalname()); and in service binder stub implementation : private final imyfeature mbinder = new imyfeature.stub() { public void dotask(string classname) { try { class<?> clazz = class.forname(classname); constructor<?> ctor = clazz.getconstructor((class[]) null); object object = ctor.newinstance(); ...
Read more

How to provide Authorization & Authentication using Asp.net, C#? -

Image
i have asp.net application in c#. i have provide page authorization specific user/usergroup. i have created 2 tables in database: 1) pagename 2)permissions[insert, update, view, delete] but i'm unable match tables , permissions assigning... can 1 please me, how created tables in database , how coding. please me. you can below explanation. configure access specific file , folder, set forms-based authentication. request page in application redirected logon.aspx automatically. in web.config file, type or paste following code. this code grants users access default1.aspx page , subdir1 folder . <configuration> <system.web> <authentication mode="forms" > <forms loginurl="login.aspx" name=".aspnetauth" protection="none" path="/" timeout="20" > </forms> </authentication> <!-- section denies access files in...
Read more

How to use Authorization & Authentication in Asp.net, C#? -

i using roll management , trying give page , folder access according user or user group, using server created ad group user authentication. i have default1.aspx page default , subdir1 folder give different access separate user group i using below logic in web.config. <location path="subdir1"> <system.web> <authorization> <allow users ="?" /> </authorization> </system.web> </location> i facing problem provide same access 2 or more directory same user should have provide allow user code twice both folder? i can use logic repeating value folder want access providing in 1 logic. i have got answer configure folder/page access, have make different access shown below.. configure access specific file , folder, set forms-based authentication. request page in application redirected logon.aspx automatically. in web.config file, done following code. this code grants user...
Read more