I am a beginner in angularjs, i want to know what code should be used if i want to pop up a drop down depending upon the button being clicked.
If i click on India, the drop down corresponding to India should appear and if I click on Pakistan, the drop down corresponding to Pakistan should appear.
This is what I've tried so far :
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
button
{ background-color: #4CAF50;
color: white;
display: inline-block;
text-align: center;
font-size: 16px ;
}
</style>
<body>
<div>
<br/>
<button type = "India" ng-click= "India_dropDown">India </button> <br/> <br/>
<button type = "Pakistan" ng-click= "Pakistan_dropDown">Pakistan </button>
</div>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model= "India_dropDown" ng-options= " x for x in names1">
</select>
<select ng-model= "Pakistan_dropDown" ng-options= " y for y in names2">
</select>
</div>
<script>
var app = angular.module('myApp' , [] );
app.controller('myCtrl' , function($scope) {
$scope.names1 = ['Sachin' ,'Dhoni','Virat','Dravid'] ;
$scope.names2 = ['Shoaib' ,'Malik','Irfan','Sarfraz'] ;
});
</script>
</body>
</html>
I have created a fiddler here to demo the solution. Basically I am triggering the mouse down event on the required select box which will pop the box.
Controller
$scope.indiaDropDown = function() {
var dropdown = document.getElementById('indiaselect');
var event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
dropdown.dispatchEvent(event);
}
$scope.pakDropDown = function() {
var dropdown = document.getElementById('pakselect');
var event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
dropdown.dispatchEvent(event);
}
HTML
<select ng-model="India_dropDown" id="indiaselect" ng-options=" x for x in names1">
</select>
<select ng-model="Pakistan_dropDown" id="pakselect" ng-options=" y for y in names2"></select>
<br/>
<button type="India" ng-click="indiaDropDown()">India </button>
<br/>
<button type="Pakistan" ng-click="pakDropDown()">Pakistan </button>
I am not sure if you pop open the dropdowns or just show/hide it. Incase you want to just show/hide the select boxes consider using ng-show/ng-hide. My solution will pop open the dropdown.
Programmatically show or hide each select box using ng-show.
<div ng-show="country === 'Packistan'">
<!-- pakistan select -->
</div>
<div ng-show="country === 'India'">
<!-- India select -->
</div>
Toggle country by what was clicked.
<button id="India" ng-click="toggleCountry($event)">India</button>
<button id="Pakistan" ng-click="toggleCountry($event)">Pakistan</button>
In your controller...
$scope.country = "";
$scope.toggleCountry = function(e) {
$scope.country = e.target.id;
}
Or just set it directly in the ng-click action.
<button id="India" ng-click="country = 'India';">India</button>
<button id="Pakistan" ng-click="country = 'Pakistan';">Pakistan</button>
Maybe like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-require="angular.js#1.4.x"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div>
<button type="button" ng-click="setCountry(india)">India</button>
<button type="button" ng-click="setCountry(pakistan)">Pakistan </button>
</div>
<select ng-model="country_select" ng-options="x for x in country"></select>
</div>
<script>
var app = angular.module('myApp' , [] );
app.controller('myCtrl' , ['$scope', function($scope) {
$scope.country = [];
$scope.india = ['Sachin' ,'Dhoni','Virat','Dravid'];
$scope.pakistan = ['Shoaib' ,'Malik','Irfan','Sarfraz'];
$scope.setCountry = function(name){
$scope.country = name;
};
}]);
</script>
</body>
</html>
Related
I have a select tag like this:
<select... ng-model="someProperty" ng-change="openSomeDialog()">
<option value=""></option>
<option value="Test1">Test1</option>
<option value="Test2">Test2</option>
</select>
The openSomeDialog() function opens a ui.bootstrap.modal directive modal. When the user closes the modal, the dropdown reverts to the initial option which is the empty one (first option) instead of what the user has selected. I also tried to use a watch on the select's ngModel and I get the same issue.
If I put some non modal related logic in the function instead of opening a modal, the selection works fine so it seems the process of opening the modal changes the events workflow or something.
How do I get the dropdown to select what the user has selected before the modal opened, after the modal closes?
I think this might be useful-> https://stackoverflow.com/a/1033982/7192927
Try binding the "selected" attribute to an object/variable as required to your case.
If you are using AngularJS, Instead of using select, you can use md-select of angular material, where u have the trackby attribute to make the option appear
as selected.--> https://material.angularjs.org/latest/api/directive/mdSelect
Ng-Options
Try using ng-options:
// Script
$scope.datarray = ["test1, "test2"];
<!-- HTML -->
<select class="form-control" ng-options="test in dataArray" ng-model="someProperty" ng-change="openSomeDialog()">
<option value=""></option>
</select>
https://embed.plnkr.co/wF3gc5/
EDIT: Updated my answer to better align with your requirements / comment.
Reference
https://docs.angularjs.org/api/ng/directive/select
Snippet
(function() {
"use strict";
var app = angular.module('plunker', ['ui.bootstrap']);
app
.controller("MainCtrl", MainCtrl)
.controller("ModalController", ModalController);
MainCtrl.$inject = ["$scope", "$log", "$uibModal"];
function MainCtrl($scope, $log, $uibModal) {
// Sample Data
$scope.cats = [{
id: 0,
name: "mister whiskers"
}, {
id: 1,
name: "fluffers"
}, {
id: 2,
name: "captain longtail"
}];
$scope.openModal = function() {
// Open the modal with configurations
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html', // Points to my script template
controller: 'ModalController', // Points to my controller
controllerAs: 'mc',
windowClass: 'app-modal-window',
resolve: {
cats: function() {
// Pass the Cats array to the Modal
return $scope.cats;
},
selectedCat: function() {
// Pass the selected cat to the Modal
return $scope.selectedCat;
}
}
});
// Handle the value passed back from the Modal
modalInstance.result.then(function(returnedCat) {
if (returnedCat === null || returnedCat === undefined) {
// Do Nothing
return;
}
// We can now update our main model with the modal's output
$scope.selectedCat = returnedCat;
});
}
}
ModalController.$inject = ['$scope', '$timeout', '$uibModalInstance', 'cats', 'selectedCat'];
function ModalController($scope, $timeout, $uibModalInstance, cats, selectedCat) {
// Assign Cats to a Modal Controller variable
console.log("cats: ", cats)
$scope.modalCats = cats;
if (selectedCat !== null || selectedCat !== undefined) {
$scope.selectedModalCat = selectedCat;
}
$scope.submit = function() {
// Pass back modified resort if edit update successful
$uibModalInstance.close($scope.selectedModalCat);
}
$scope.close = function() {
// Pass back modified resort if edit update successful
$uibModalInstance.close(null);
}
}
})();
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<link data-require="bootstrap-css#3.*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
<!-- JQuery and Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Angular Stuff -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-touch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-animate.js"></script>
<!-- UI Bootstrap Stuff -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<!-- OUR Stuff -->
<script src="app.js"></script>
<script src="modalController.js"></script>
</head>
<body ng-controller="MainCtrl">
<!-- ==== MAIN APP HTML ==== -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="jumbotron text-center">
<h3>AngularJS - ngOptions and UI Bootstrap Modal</h3>
</div>
</div>
<div class="col-xs-12">
<form class="form">
<div class="form-group">
<label class="form-label">Select Profile:</label>
<select class="form-control" ng-options="cat.name for cat in cats track by cat.id" ng-model="selectedCat" ng-change="openModal()">
<option value="">-- Cat Selection --</option>
</select>
</div>
<div class="well form-group" ng-show="selectedCat !== undefined && selectedCat !== null">
<label>Selected: </label>
<pre>{{ selectedCat }}</pre>
</div>
</form>
</div>
</div>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
<select class="form-control" ng-options="modalCat.name for modalCat in modalCats track by modalCat.id" ng-model="selectedModalCat">
<option value="">-- Cat Selection --</option>
</select>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="submit()">OK</button>
<button class="btn btn-warning" type="button" ng-click="close()">Cancel</button>
</div>
</script>
</body>
</html>
Actually I have found the issue in 'my' code. After closing the modal, it was retrieving data that caused the property bound to the select to refresh as well.
Angular Bootstrap modal Doesn't save the state when the it's closed. You must perform some alternative code to save the user state when they closed the browser or store it in cookie. After that when the user open again the modal you must fetch it and display it in your
<select....... ng-change="openSomeDialog()">...</select>
Html5 dialogs are simple. Shoulda been there 15 years ago!
How to get ng-show working (it doesn't) with dialogs?
<!DOCTYPE html>
<html ng-app="project">
<head>
<meta charset='UTF-8'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script>
angular.module('project', [])
.controller('TheController', function ($scope) {
$scope.dialogShowing = false;
$scope.showDialog = function () {
dialogShowing = true;
document.getElementById('theDialog').show();
};
$scope.hideDialog = function () {
dialogShowing = false;
document.getElementById('theDialog').close();
};
});
</script>
</head>
<body ng-controller="TheController">
<div> Hello
<!-- dialog, where it is placed in the source, doesn't take up space -->
<dialog id="theDialog">
<div>
<h3>Simple Angular Html5Dialog</h3>
<hr/>
<p>I am very well, thank you</p>
<button ng-click="hideDialog()">No, thank you</button>
</div>
</dialog>
how are you?
</div>
<button ng-click="showDialog()">^ Click for the answer</button>
</body>
</html>
The only thing I have been able to get working is .open() and .close() on the dialog widget itself, and have to simulate ng-show/hide, above.
Advice?
I'm not sure what browser you are using, but dialog is very much unsupported by most browsers (http://caniuse.com/#search=dialog). If it's a simple modal you're looking to create why not use a div and style it accordingly?
It's perfectly possible. Here's a demo from my blog:
<div style="width: 600px;" id="example">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript">
var App = angular.module("MyApp", []);
// Make ng-show/hide doesn't work with <dialog>
App.controller('DialogDemo', ['$scope', function ($scope) {
$scope.dialogShowing = false;
$scope.showDialog = function () {
$scope.dialogShowing = true;
$scope.whatHappened = "something happened that needs a dialog";
document.getElementById('theDialog').showModal();
};
$scope.hideDialog = function () {
$scope.dialogShowing = false;
document.getElementById('theDialog').close();
$scope.whatHappened = undefined;
};
}]);
</script>
<div style="align-content: center" ng-app="MyApp" ng-controller="DialogDemo">
(text above button)<br/>
<button ng-click="showDialog()">Click me</button><br/>
(text below button, and above dialog in source)<br/>
<dialog id="theDialog">
<div>
<h3>Ooops</h3>
<hr/>
<div>
<!-- see note above about double-curly-brace -->
{{whatHappened}}
</div>
<hr/>
<button ng-click="hideDialog()">OK</button>
</div>
</dialog>
(text below dialog in source)<br/>
<span style="font-weight: bold" ng-show="dialogShowing">Dialog should now be show (modal style) in the center of the page.</span>
</div>
</div>
Suppose i have 5 textboxes in a list.I enter text input in the first text box and click send. Now i want the input value entered to be showed in all the other textboxes in the list.
Following is my html code:-
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Plunker</title>
<script src="./scripts/angular.min.js"></script>
<script src="./scripts/app.js"></script>
</head>
<body ng-app="chatApp">
<div ng-controller="chatController">
<ul>
<li ng-repeat="chat in chats">
<input type="text"/>
<button ng-click="sendChat()">Send</button>
<button ng-click="deleteChat($index)">Delete</button>
</li>
</ul>
<button ng-click="addChat()">Click me to add</button>
</div>
</body>
</html>
Following is my angular code:-
var app=angular.module('chatApp',[]);
app.controller('chatController',['$scope',function($scope){
$scope.chats=[];
$scope.addChat = function() {
if($scope.chats.length<10)
{
$scope.chats.push({name:''});
}
}
$scope.deleteChat=function(index){
$scope.chats.splice(index,1);
}
$scope.sendChat=function(data){
}
}]);
I have a sendChat function where i was thinking to put the code.
Add model in your input field
<input type="text" ng-model="chat.msg"/>
Then pass the selected msg
<button ng-click="sendChat(chat)">Send</button>
Then assign msg in other textboxes
$scope.sendChat = function(data) {
$scope.chats.map(function(x) {
x.msg = data.msg;
})
}
DEMO
I have tried (guessed) many possible options and searched but I cannot find how to check the created checkboxes when a button is pressed. I know I need to read more and I won't give up but I do want to move on quickly if anyone can help, I want to get to the next part of the app.
Thanks
<div id="divc">
<core-selector target="{{$.myForm}}" itemsSelector="input[type=checkbox]"
selected="{{Index}}" valueattr="value" activateEvent="change">
</core-selector>
<form id="myForm">
<template repeat="{{cItem, Index in carray}}">
<label><input name="{{Index}}" type="checkbox" value="{{Index}}"> {{cItem._Ffield}}</label> <br>
</template>
</form>
</div>
In the script I can move to the next checkbox when the button is pressed
<script>
Polymer('my-element', {
created: function()
{
this.Index = 0;
},
increment: function(e){
//would like to check the checkbox before moving to the next, I thought it would be easy but nothing seems to work.
this.Index++; //move to next
}
});
</script>
I'm not sure if i understand what u want exactly...
Here is a form with dynamicly created checkboxes and a button that checks them ...
I ripped out all other stuff (not needed for this example)
<!doctype html>
<html>
<head>
<script src="/components/platform/platform.js"></script>
<style>
body {
font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0;
}
</style>
<link rel="import" href="/components/polymer/polymer.html">
<script>
</script>
</head>
<body fullbleed unresolved>
<my-element>
</my-element>
<polymer-element name="my-element">
<template>
<form id="myForm">
<template repeat="{{cItem in carray}}">
<label><input name="{{Index}}" type="checkbox">{{cItem}}</label> <br>
</template>
<input type="button" on-tap="{{checkAllBoxes}}" value="CHECK">
</form>
</template>
<script> Polymer('my-element', {
created: function()
{
this.carray = ['a','b','c'];
},
checkAllBoxes: function(e){
var c = this.shadowRoot.querySelectorAll('input[type=checkbox]');
c.array().forEach(
function(e,i,a) {e.checked = true;}
);
},
});
</script>
</polymer-element>
</body>
</html>
I am using AngularJS and Angular-UI Bootstrap tabs. This is my controller:
app.controller("SettingsCtrl", ['$scope','SettingsFactory','$stateParams', function($scope,SettingsFactory,$stateParams){
$scope.navType = 'pills';
$scope.saveLanguage = function()
{
console.log($scope.test.vari); // loged undefined
}
}]);
My view
<div class="row clearfix">
<tabset>
<tab heading="Jezik">
<form role="form" name="test">
<div class="form-group">
<label for="lang">Izaberite jezik</label>
<select class="form-control" ng-model="vari">
<option>Hrvatski</option>
<option>Srpski</option>
<option>Bosanski</option>
<option>Engleski jezik</option>
<option>Njemački jezik</option>
</select>
</div>
<button type="submit" class="btn btn-default" ng-click="saveLanguage()">Save</button>
</form>
</tab>
</div>
Can someone help me to see why is loging undefined when I am using Angular-UI Bootstrap Tabs. Is it creating own scope. How tu access model value ?
This code solved my problem (removed name atribute from form, added ng-model="test.vari", and added $scope.test= {} in my controller) :
<tabset>
<tab heading="Jezik">
<form role="form">
<div class="form-group">
<label for="lang">Izaberite jezik</label>
<select class="form-control" ng-model="test.vari">
<option>Hrvatski</option>
<option>Srpski</option>
<option>Bosanski</option>
<option>Engleski jezik</option>
<option>Njemački jezik</option>
</select>
</div>
<button type="submit" class="btn btn-default" ng-click="saveLanguage()">Spremi Jezik</button>
</form>
</tab>
</div>
app.controller("SettingsCtrl", ['$scope','SettingsFactory','$stateParams', function($scope,SettingsFactory,$stateParams){
$scope.navType = 'pills';
$scope.test= {};
$scope.saveLanguage = function()
{
console.log($scope.test.vari);
// SettingsFactory.update({ id:$stateParams.user_id }, $scope.language);
}
}]);
The tab creates child scopes so we need to bind it to an expression that evaluates to a model in the parent scope.
For this, the model must use a . like this:
ng-model='object.variable'
And we must declare the object in controller's top:
$scope.object = {};
Example:
angular.module('test', ['ui.bootstrap']);
var DemoCtrl = function ($scope) {
$scope.obj = {text: ''};
$scope.show = function() {
alert('You typed: ' + $scope.obj.text)
}
};
<!doctype html>
<html ng-app="test">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DemoCtrl">
Value outside the tabs: {{obj.text}}
<uib-tabset>
<uib-tab heading="Tab 1">
<input ng-model="obj.text">
<button ng-click="show()">Show</button>
</tab>
</tabset>
</div>
</body>
</html>