I have a form in that I have to show suggestions for skills text field, I tried it with using ng-repat and list view, but my problem is if the user click on the available suggestions, I need that value in ng-model, I had given anchor tag for each li but it is not working please help me, thanks in advance. Below is the i tried code
<!Doctype html>
<html ng-app="myapp">
<head>
<script src="http://code.angularjs.org/1.2.4/angular.min.js"></script>
<script type="text/javascript">
var sampleapp = angular.module("myapp", []);
sampleapp.controller("myctrl", function($scope, $http){
$scope.fruits = ['php', 'python', 'perl', 'java', 'javascript', 'ajax', 'servlets', 'html', 'sap', 'sap/abap', 'sap/pico'];
$scope.selectQuasuggestions=function(sid){
$scope.query = sid;
}
});
</script>
<style type="text/css">
ul
{
background-color: #fff;
width: 12%;
padding: 5px;
margin: 1px;
overflow-y: scroll;
border:1px solid brown;
height: auto;
}
li{
padding-bottm: 5px;
line-height:20px;
}
</style>
</head>
<body>
<div ng-controller="myctrl">
<input type="text" ng-model="query" placeholder="enter your skills"/>
<div ng-show="query">
<ul style="list-style-type:none">
<li ng-repeat="fruit in fruits | filter:query"> {{quasuggestionss.name}}{{fruit}}</li>
</ul>
</div>
</div>
</body>
</html>
Try using <select> tag
<div ng-show="query">
<select ng-model="query">
<option ng-repeat="fruit in fruits | filter:query" class="ng-binding">{{fruit}}</option>
</select>
</div>
See the attached plunker for o/p
May be this will help you
OR
Use typeahead property of ui-bootstrap
check the following pluncker link for typeahead example
PLUNCKER
Related
HTML file - directive template
<div class='class1'>
<span ng-show="Edit1">
<script type="text/ng-template" id="editdetails.html">
<div class="modal">
<h3>Update Unit Details</h3>
<input type='text' name='email' value=''>
</div>
</script>
</span>
</div>
<div class='class2'>
<span ng-show="Edit2">
Some content
</span>
</div>
Angular JS code
I am loading this into html file called directive template and then want to get only the ng-template content of editdetails.html how to do that?
var directiveTemplate = null;
var req = new XMLHttpRequest();
req.onload = function () {
directiveTemplate = this.responseText;
};
var url1 = 'directivetemplate.html';
req.open('get', url1, false);
req.send();
$templateCache.put('template.html', directiveTemplate);
$edittemplate=directiveTemplate;
//The below code doesn't get me content inside the editdetails
$templateCache.put('editdetails.html',$edittemplate.filter('#editdetails.html').html());
Obviously you could read more about $templateCache and script documentation at Official AngularJS website. Other option is to try this one.
angular
.module("Example", [])
.controller("ExampleCtrl", ExampleCtrl);
ExampleCtrl.$inject = ['$scope', '$templateCache'];
function ExampleCtrl($scope, $templateCache) {
$scope.getContent = function() {
var script = document.getElementsByTagName("script");
var id = script[2].id;
var htmlContent = $templateCache.get(id);
document.getElementById("display").innerHTML = htmlContent;
};
}
/* Styles go here */
.content {
background-color: green;
color: white;
padding: 10px;
}
.button {
width: 150px;
padding: 10px;
background-color: red;
color: white;
border: 0px white solid;
border-radius: 5px;
}
<!DOCTYPE html>
<html ng-app="Example">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-controller="ExampleCtrl">
<script type="text/ng-template" id="templateId.html">
<p class="content">This is the content of the template</p>
</script>
<p>
<input type="button" class="button" ng-click="getContent()" value="Get Template's Content">
</p>
<div id="display"></div>
</body>
</html>
selectAll/none options inside md-select
Hi, I'm trying to add selectAll/None option inside md-select, once selectAll checkbox is checked all other checkbox should be checked how to get control of other checkboxes is my problem please can anyone help me i need this very badly. code is down
thanks in advance.
<!doctype html>
<html>
<style>.selectdemoSelectHeader {
/* Please note: All these selectors are only applied to children of elements with the 'selectdemoSelectHeader' class */ }
.selectdemoSelectHeader .demo-header-searchbox {
border: none;
outline: none;
height: 100%;
width: 100%;
padding: 0; }
.selectdemoSelectHeader .demo-select-header {
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12);
padding-left: 10.667px;
height: 48px;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
width: auto; }
.selectdemoSelectHeader md-content._md {
max-height: 240px; }</style>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
</head>
<body ng-app = "myapp">
<div ng-controller="HelloController" class="md-padding" ng-cloak>
<div>
<h1 class="md-title">Pick a vegetable below</h1>
<div layout="row">
<md-input-container>
<label>Vegetables</label>
<md-select ng-model="selectedVegetables"
md-on-close="clearSearchTerm()"
data-md-container-class="selectdemoSelectHeader"
multiple>
<md-select-header class="demo-select-header">
<input ng-model="searchTerm"
type="search"
placeholder="Search for a vegetable.."
class="demo-header-searchbox md-text">
</md-select-header>
<md-optgroup label="vegetables">
<md-checkbox ng-model="selectedAll"ng-click="checkAll()" style="float:left">SelectAll/NONE</md-checkbox>
<md-option ng-value="vegetable" ng-repeat="vegetable in vegetables |
filter:searchTerm">{{vegetable}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
</div>
</div>
</div>
<script>
angular.module("myapp", ['ngMaterial'])
.controller("HelloController", function($scope,$element) {
$scope.vegetables = ['Corn' ,'Onions' ,'Kale' ,'Arugula' ,'Peas', 'Zucchini'];
$scope.searchTerm;
$scope.clearSearchTerm = function() {
$scope.searchTerm = '';
};
$element.find('input').on('keydown', function(ev) {
ev.stopPropagation();
});
});
</script>
</body>
</html>
This is not working working<div id = "number_1" class="number" ng-click="selected='1'" ng-class="{active: selected=='1',firstactive: firstnumber=='1'}"><div class="number-text">1</div></div>but if I apply ng-class with child div it works fine.
Works for me. Can you check this
var demo = angular.module('demo', []);
demo.controller('DemoCtrl', function($scope) {
$scope.firstnumber = 1;
});
.active {
color: green;
}
.firstactive {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="demo">
<div ng-controller="DemoCtrl">
<div id="number_1" class="number" ng-class="{active: selected=='1',firstactive: firstnumber=='1'}" ng-click="selected='1'">
<div class="number-text">1</div>
</div>
</div>
</body>
Here is my rows code:
angular.module('myApp', [])
.controller('Ctrl', ['$scope', function($scope) {
$scope.foo = function() {
alert("bla bla bla");
};
}]);
#rollDiv {
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
#rollDiv label span {
padding:5px 5px 2px 2px;
display:block;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
<label>
<input type='checkbox' ng-click='foo()' hidden><span class=" glyphicon glyphicon-list-alt"></span>
</label>
</div>
At the example above foo event is fired when element checked and unchecked, can I make a call of the event from checkbox element only if checkbox is checked and event not called if I uncheck element.I don't feel like making any changes in controller.
Here is what you are looking for.
<input type='checkbox' ng-model='chkMonitor' ng-click='chkMonitor && foo()'>
chkMonitor is just a simple scope variable.
Explanation:
foo() function can be conditionally executed by placing it in a boolean expression. The following ...
ng-click='false && foo()'
will never execute the function. So, the task is to replace false with a variable which represent the check state. We can use $event.target.checked - but DOM referencing in angular expression is prohibited.
Solution is to bind a scope variable with the check box and use it with foo()
Of course there are conventional methods which can filter out clicks inside the foo() function. But your question was about NOT firing foo() if not checked.
Look this:
angular.module('myApp', [])
.controller('Ctrl', ['$scope',
function($scope) {
$scope.foo = function() {
console.log("bla bla bla");
};
}
]);
#rollDiv {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#rollDiv label span {
padding: 5px 5px 2px 2px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
<label>
<input type='checkbox' ng-model="cbxTest" ng-click='read?"":foo();read=true' hidden><span class=" glyphicon glyphicon-list-alt"></span>
</label>
</div>
I am blocked and can not be as follow, to see if someone could help me ... (sorry for my bad English and my explanation).
I have this pen where I have an input to insert a value or load default. NgStorage I use to store the value in memory if the app is reloaded and always load the user types in the input (localStorage).
After I have a dropdown where I choose one of the two numbers that charged me one of two templates that I have created (or template1 template2) in the following div.
Far right, but now I would like to save that result in any way for the next div (red border) perform a simple arithmetic operation as chosen above using a scope variable declared in the driver from the start.
Any help please?
Here my pen (I use ionic): http://codepen.io/maestromutenrroy/pen/ukwIC
<html ng-app="ionicApp"><head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic....</title>
<link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Hello!</h1>
</ion-header-bar>
<br /><br /><br />
<!-- load 11, but I change the valor -->
Write a number: <input type="number" ng-model="$storage.c6" style="border: 1px solid #ddd; padding-left: 10px">
<br>
<!-- select of two templates -->
Select one option:
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
<!-- print a template select -->
<div ng-include src="template.url" onload='myFunction()'></div>
<!-- template1.html -->
<script type="text/ng-template" id="template1.html">
{{1000 - $storage.c6}}
</script>
<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
{{10 - $storage.c6}}
</script>
<br>
<hr />
<div style="border: 2px solid red; padding: 20px">
Now, I would like a same operation (result of template1 or template2 - $storage.c12): .....
</div>
</body>
</html>
angular.module('ionicApp', ['ionic','ngStorage'])
.controller('MainCtrl', function($scope, $localStorage) {
$scope.$storage = $localStorage.$default({
c6: 1,
c12: 2
});
$scope.templates = [{
name: '5',
url: 'template1.html'}
,
{
name: '10',
url: 'template2.html'}];
$scope.template = $scope.templates[0];
})
Thank you!
You can save the results in a scope object and update it inside each template:
<!-- template1.html -->
<script type="text/ng-template" id="template1.html">
{{results.x = 1000 - $storage.c6}}
</script>
<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
{{results.x = 10 - $storage.c6}}
</script>
<div style="border: 2px solid red; padding: 20px">
Now, I would like a same operation (result of template1 or template2 - $storage.c12): ..... {{results.x - $storage.c12}}
</div>
And on the controller:
$scope.results = {};
Demo