I am creating typeahead for dropdown. I used angularjs-typeahead-dropdown.min . But its not working. Below is my code
<head>
<script src="src/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="Typeahead.js"></script>
<script src="src/angularjs-typeahead-dropdown.min.js"></script>
<title></title>
</head>
<div class="container">
<typeahead-dropdown id="ex1" ng-model="ex1model" options="ex1data" config="ex1config"></typeahead-dropdown>
</div>
in js file
$scope.ex1model = [];
$scope.ex1data = [{ id: 1, label: "Tony" },
{ id: 2, label: "Larita" },
{ id: 3, label: "Brian" },
{ id: 4, label: "Andrew" },
{ id: 5, label: "Bruno" },
{ id: 6, label: "Adrian" },
{ id: 7, label: "Stuart" },
{ id: 8, label: "Stephen" },
{ id: 9, label: "Peter" },
{ id: 10, label: "Alexander" }];
$scope.ex1config = { modelLabel: "id", optionLabel: "label" };
This is not working. Nothing comes in html page. Please tell me how to implement typeahead for dropdown. Is there any other way. I should not use jquery
You can use UI Bootstrap's Dropdown on an input box as follows
<div uib-dropdown>
<input type="text" ng-model="searchKey" uib-dropdown-toggle>
<ul uib-dropdown-menu>
<li ng-repeat="data in ex1data | filter:searchKey">
{{data.label}}
</li>
</ul>
</div>
Check the documentation for UI Bootstrap dropdown here
i would recommend to use select2
this link will make u learn how to use it from scratch
select2 for beginner
this link will make you realise why to use it
just have a look
Examples for select2
Related
<div class="district-list" ng-repeat="office in offices | filter : {'DisplayOffice' : officeLocationLevelList.searchText}|limitTo:1">
Have a multilevel list of data. depending on the condition i want to filter the data.(First Level/ inner level). If the first level is selected then i have to search with one json attribute and if the inner level is selected then search with another json attribute. I have set it in a scope variable. How can use scope variable instead of 'DisplayOffice'
you can bind a function to filter which returns the filter condition using scope variables.
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.data = [
{
id: 1,
name: 'name1'
},{
id: 2,
name: 'name2'
},{
id: 3,
name: 'name3'
},{
id: 3,
name: 'aaaaa'
}
];
$scope.getCondition = function() {
var obj = {};
obj[$scope.key] = $scope.value;
return obj;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
Key: <input type="text" ng-model="key">
Value: <input type="text" ng-model="value">
<div ng-repeat="item in data | filter: {[key]:value}">
{{item.name}}
</div>
</div>
and there is another way while using ES6' new feature {[key]: value}, but this may now work for some browsers.
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.$watch("key", function() {
console.log({[$scope.key]:$scope.value});
});
$scope.$watch("value", function() {
console.log({[$scope.key]:$scope.value});
});
$scope.data = [
{
id: 1,
name: 'name1'
},{
id: 2,
name: 'name2'
},{
id: 3,
name: 'name3'
},{
id: 3,
name: 'aaaaa'
}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
Key: <input type="text" ng-model="key">
Value: <input type="text" ng-model="value">
<div ng-repeat="item in data | filter: {[key]: value}">
{{item.name}}
</div>
</div>
I'm very much new to angularjs so I'm facing this issue where i have a nested json, and i am using the parent value as a header and the values of the child as checkboxes. Now, when I want to retrieve the value of those checkboxes which have been ticked, i want it in the format of {parent_name:child_name} stored in an array.
I'm using the following sample data taken from this thread.
Data:
parents : [{
name: 'George',
age: 44,
children: [{
name: 'Jack',
age: 16,
isChecked: 'true'
},{
name: 'Amy',
age: 13,
isChecked: 'false'
}]
}, {
name: 'Jimmy',
age: 38,
children: [{
name: 'Max',
age: 7,
isChecked: 'false'
},{
name: 'Lily',
age: 5,
isChecked: 'false'
},{
name: 'Kim',
age: 4,
isChecked: 'true'
}]
}]
And, my current output
looks like this
My HTML code is
<div class="col-md-12 col-xs-12" ng-repeat="parent in parents ">
<div class="form-group">
<label>{{parent.name}}</label>
<div class="input-group" ng-repeat="child in parent.children">
<label><input type="checkbox" ng-checked="child.isChecked=='true'"> {{child.name}}</label>
</div>
<hr>
</div>
Now, in reference to the image, I want to have {George:Jack} and {Jimmy:Kim} in an array, but i can't find a way to achieve that.
EDIT : I forgot to mention another important point, some checkboxes will be pre-selected. As per the data, checkbox for Jack and Kim will already be ticked on-load. I have to fetch the value for the pre-selected values as well as any newly checked checkboxes.
My Plunker code is here.
I hope my question is clear. Thanks in advance!
The proposed solution modifies your original JSON object.
If for some reasons, you have to keep the original JSON object, you should do a copy of it and store it in the controller scope (Angular has functions to do it).
The idea is to add a isChecked attribute in the original JSON object which will be values to false by default and that will be set to true when the checkbox is selected or false when the checkbox is unselected.
That is possible by using the ng-model directive which binds here a html input to a variable in JS side.
Here is the plunker :
http://plnkr.co/edit/EzDp3mMtlnH3t4bIz8e6?p=preview with Angular js 1.5.
js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.parents = [{
name: 'George',
age: 44,
children: [{
name: 'Jack',
age: 16,
isChecked: true;
},{
name: 'Amy',
age: 13
}]
}, {
name: 'Jimmy',
age: 38,
children: [{
name: 'Max',
age: 7
},{
name: 'Lily',
age: 5
},{
name: 'Kim',
age: 4,
isChecked: true;
}]
}]
$scope.submit= function(){
var results = [];
for (var i=0; i< $scope.parents.length; i++){
var parent = $scope.parents[i];
for (var j=0; j< parent.children.length; j++){
var child = parent.children[j];
if (child.isChecked){
results.push(parent.name +":"+ child.name);
}
}
}
//display info
for ( i=0; i< results.length; i++){
console.log(results[i]) ;
}
}
});
html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div class="col-md-12 col-xs-12" ng-repeat="parent in parents ">
<div class="form-group">
<label>{{parent.name}}</label>
<div class="input-group" ng-repeat="child in parent.children">
<label><input type="checkbox" ng-checked="child.isChecked=='true'" ng-model="child.isChecked">
{{child.name}}</label>
</div>
<hr>
</div>
</div>
<button type="button" ng-click="submit()" class="btn btn-success width-80px">Submit</button>
</body>
</html>
Using the ngChecked directive, you can only mark the checkbox as checked if the expression (here child.checked=='true') is truthy. However, it doesn't affect the value of your variable child.checked.
I recommand you to use instead the ngModel directive which will bind the value of your checkbox with child.checked (or any other variable).
<div class="col-md-12 col-xs-12" ng-repeat="parent in parents ">
<div class="form-group">
<label>{{parent.name}}</label>
<div class="input-group" ng-repeat="child in parent.children">
<label>
<input type="checkbox" ng-model="child.checked">{{child.name}}
</label>
</div>
<hr>
</div>
Since child.checked is not defined at the begining, it will be falsy so the checkbox won't be checked. You can change this behaviour by setting it to true.
Then, to create an array of your results, you can do something like this:
var results = [];
parents.forEach(function (parent) {
parent.children.forEach(function (child) {
if (child.checked) {
var couple = {};
couple[parent.name] = child.name;
results.push(couple);
}
});
});
Currently I am using select for dropdown. I would like to change this as multiselect dropdown. But when I declare the multiselect dropdown I am getting error saying "unknown attribute Options"
The current code which is just a dropdown without multiselect.
<select class="form-control"> <option ng-repeat="item in CETIGroupList" value="{{item}}">{{item}}</option>
</select>
What I wrote for multiselect is
<div ng-dropdown-multiselect="" options="CETIGroupList" ></div>
Please help me creating a multiselect dropdown.
Thanks
include loadsh.js , bootstrap css , AngularJS Dropdown Multiselect in your app. Inject angularjs-dropdown-multiselect in your app
angular.module('sampleApp', ['angularjs-dropdown-multiselect'])
in your HTML page
<div ng-dropdown-multiselect="" options="example13data" selected-model="example13model" ></div>
in your Controller
$scope.example13model = [];
$scope.example13data = [{
id: 1,
label: "David"
}, {
id: 2,
label: "Jhon"
}, {
id: 3,
label: "Lisa"
}, {
id: 4,
label: "Nicole"
}, {
id: 5,
label: "Danny"
}];
Check out this fiddle : https://jsfiddle.net/ebinmanuval/8Ltae8pb/
I want to have inline editing in my kendo-ui grid. Databinding seems to work fine but when I click the Update button after editing something the scope gets updated but the edit dialogs do not disappear. If a click on another edit button it gets into a defunct state. And after all it only does update the scope if I provide at least a dummy function as k-save. And for some reason clicking the Cancel button does update the scope. So the Cancel button does what I would expect from the Update button.
As you may see I want to update the local scope on client side and not send anything to any server.
Can somebody enlighten me about what is going wrong here?
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
</head>
<body>
<div id="example" ng-app="gridTestApp" ng-controller="TestController">
<kendo-grid
k-data-source="gridData"
k-columns="gridColumns"
k-on-change="selected = data"
k-selectable="true"
k-editable="editableOptions"
k-schema="gridSchema"
k-save="saveFunction">
</kendo-grid>
<p ng-show="selected">
<label>Artist: <input ng-model="selected.artist" /></label>
<br />
<label>Track: <input ng-model="selected.track" /></label>
</p>
<p>This is for testing data-binding</p>
<ul>
<li data-ng-repeat="gridRow in gridData">
<input ng-model="gridRow.artist"></input><input ng-model="gridRow.track"></input>
<br>
</li>
</ul>
<p>This is for testing data-binding</p>
<ul>
<li data-ng-repeat="gridRow in gridData">
<span ng-bind="gridRow.artist"></span> -<span ng-bind="gridRow.track"></span>
<br>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script>
angular.module("gridTestApp",[ "kendo.directives" ])
.controller("TestController", function($scope){
$scope.gridData = new kendo.data.ObservableArray([
{ artist: "Pink Floyd", track: "The dark side of the Moon" },
{ artist: "The Beatles", track: "I've just seen a face" },
{ artist: "Queen", track: "Innuendo" }
]);
$scope.gridColumns = [
{ field: "artist", title: "Artist" },
{ field: "track", title: "Track" },
{ command: /*"destroy"*/["edit", "destroy"], title: " ", width: "175px", editable: "inline" }
];
$scope.editableOptions = {mode: "inline", update: true, destroy: true};
$scope.gridSchema = {
model: {
id: "artist",
fields: {
artist: { type: "string", validation: { required: true } },
track: { type: "string", validation: { required: true } }
}
}
}
$scope.saveFunction = function(){
console.log("somehting was modified");
}
});
</script>
</body>
</html>
I have created a plnkr for you.
Your problem is the schema - this is not a grid configuration option but a DataSource configuration option.
I'd suggest creating an actual DataSource instead of an ObservableArray (using a string id might not be ideal either):
$scope.gridData = new kendo.data.DataSource({
data: [{
artist: "Pink Floyd",
track: "The dark side of the Moon"
}, {
artist: "The Beatles",
track: "I've just seen a face"
}, {
artist: "Queen",
track: "Innuendo"
}],
schema: {
model: {
id: "artist",
fields: {
artist: {
type: "string",
validation: {
required: true
}
},
track: {
type: "string",
validation: {
required: true
}
}
}
}
}
});
(demo)
Please look at http://jsfiddle.net/mahbub/sbNty/4/
<div ng-app="">
<div ng-controller="Ctrl">
<ul>
<li ng:repeat="status in statuses"><label><input type="checkbox" data-ng-model="status.type" data-ng-true-value="closed" data-ng-false-value="{{status.type}}" />{{status.type}}</label></li>
</ul>
</div>
</div>
As you can see the label of the checkboxes are printed based on the status type from the JSON. Now on unchecking, the label becomes false. I must be missing some correct way to get back to the originial label text upon unchecking the checkbox.
I mean when I uncheck, the label needs to be "open" or whatever it was initially.
Any help is greatly appreciated.
Thanks
Finally i did it using ngInit and setting a different variable within the scope object. See the demonstration here http://jsfiddle.net/mahbub/sbNty/5/
<div ng-app="">
<div ng-controller="Ctrl">
<ul>
<li ng:repeat="status in statuses"><label><input ng-init="status.oldStat=status.type" type="checkbox" ng-model="value" ng-click="selectV(value,this)">{{status.type}}</label></li>
</ul>
</div>
</div>
Controller :
'use strict';
function Ctrl($scope) {
$scope.statuses = [{
id: 1,
type: 'open'},
{
id: 2,
type: 'open'},
{
id: 3,
type: 'new'},
{
id: 4,
type: 'closed'},
{
id: 5,
type: 'open'},
{
id: 6,
type: 'new'},
{
id: 7,
type: 'open'}
];
$scope.selectV = function(val, stat) {
if (val) {
stat.status.type = "closed";
} else {
stat.status.type = stat.status.oldStat;
}
}
}