I have a json skills , I need to multiselect the skills from dropdown model.skills , I use multipleSkills()to push the selected values in arrayvalues[], but I should not push duplicate values into arrayvalues.
Json :
var skills =
[{"name":{"skillId":1,"skillName":"JAVA"}},
{"name":{"skillId":2,"skillName":"C"}},
{"name":{"skillId":3,"skillName":"DEVOPS"}},
{"name":{"skillId":4,"skillName":"ANGULAR JS"}},
{"name":{"skillId":41,"skillName":"drupal"}},
{"name":{"skillId":42,"skillName":"backbone js"}},
{"name":{"skillId":43,"skillName":"nodejs"}},
{"name":{"skillId":44,"skillName":"phone gap"}},
{"name":{"skillId":45,"skillName":"scala"}},
{"name":{"skillId":46,"skillName":"spark"}}]
html:
<input class="form-control1" type="text" name="skills" placeholder="Core Skills"
ng-model="model.Skills" ng-focus="skillsforJobs(model.Skills)"
typeahead ="skill as skill.name.skillName for skill in skills | filter:$viewValue | limitTo:10"
typeahead-on-select="multipleSkills(model.Skills)"
ng-minlength =1 />
JS:
$scope.arrayvalues = [];
$scope.multipleSkills = function(data){
if($scope.arrayvalues.length <1){
$scope.arrayvalues.push(data);
} else if($scope.arrayvalues.length > 0){
if($scope.arrayvalues.indexOf($scope.model.Skills) == -1) {
if($scope.model.Skills != ""){
for( var i=0; i<$scope.arrayvalues.length;i++){
$scope.arrayvalues[i].name.skillId.indexOf( data.name.skillId){
$scope.arrayvalues.push(data);
$scope.model.Skills = "";
}
}
}
}
please refer this github project.
AngularJS Dropdown Multiselect
html
<script type="text/javascript" src="angularjs-dropdown-multiselect.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-dropdown-multiselect="" options="example1data" selected-model="example1model"></div>
</div>
js
var app = angular.module('myApp', ['angularjs-dropdown-multiselect']);
app.controller('myCtrl', function($scope) {
});
Related
How to do I add mainCtrl.header.Version in the string text if the condition in ng-attr-title is false?
HTML
<label class="form-control" ng-attr-title="{{mainCtrl.header.Version == 0 ? 'This form has not yet been submitted for approval' : 'This form has been submitted for approval {{mainCtrl.header.Version}} times'}}">{{mainCtrl.header.Version}}</label>
The syntax is :
ng-attr-title="{{mainCtrl.header.Version == 0 ? 'This form has not yet been submitted for approval' : 'This form has been submitted for approval ' + mainCtrl.header.Version + ' times'}}"
ng-attr-title displays the string it is given, so you have to use {{ expr }}.
To test your expression I'd advice you to write <pre>{{ your expression | json }}</pre> to see what is the result.
You can achieve it from JS controller side. Take a variable title check if version is 0 then assign title you want. And if version is > than 0 then concat the version with title message. Please consider the following code snippet.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl as mainCtrl">
<label class="form-control" ng-attr-title="{{mainCtrl.title}}">
{{mainCtrl.header.Version}}
</label>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var mainCtrl = this;
mainCtrl.header = {"Version":0};
if( mainCtrl.header.Version == 0 )
{
mainCtrl.title = "This form has not yet been submitted for approval";
}
else
{
mainCtrl.title = "This form has not yet been submitted for " +mainCtrl.header.Version+" approval";
}
});
</script>
</body>
</html>
you can do it by calling a function like that:
var app = angular.module('app', []);
app.controller('htmlTitle', ['$scope','$http', function($scope, $http){
$scope.mainCtrl = {
header: {
Version: 0
}
};
$scope.get_title = function(){
if($scope.mainCtrl.header.Version == 0){
return 'This form has not yet been submitted for approval';
}
else{
return 'This form has been submitted for approval ' + $scope.mainCtrl.header.Version + ' times';
}
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="htmlTitle">
<label class="form-control" title="{{get_title()}}" >{{mainCtrl.header.Version}}</label>
</div>
</div>
and here is a codepen.
I am new to angular and i am trying to build basic search + filter functionality
I am able to get search working but i am having difficulty with filter on unique skills (1,2,3 in this example)
I tried using "ng-click" and calling custom function but didn't get any solution
here is my code example :
<html lang="en">
<meta charset="UTF-8">
<title> Exercise</title>
<!--Angular JS-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("app", []);
app.controller('person', ['$scope', function($scope ){
$scope.players = [{"name" : 'commonABC', 'skill' : 1},{"name" : 'commonXYZ', 'skill' : 3},{"name": 'SAMEqwe', 'skill': 1},{"name": 'SAMEjkl', 'skill': 2}]
$scope.search = function(row) {
return (angular.lowercase(row.name).indexOf(angular.lowercase($scope.player_filter) || '') !== -1);
};
}]);
</script>
</head>
<body>
<div ng-app="app">
<div ng-controller="person">
<input type="text" ng-model="player_filter" placeholder="search name">
<select>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<br><br>
<div ng-repeat="player in players | filter: search">
<strong>name is :{{player.name}}</strong
<br>
<strong>and skill is :{{player.skill}}</strong>
<hr>
</div>
</div>
</div>
</body>
</html>
1) Your variable "search" is always empty because you forgot to set it as ng-model to your select list
Replace your select tag with
<select ng-model="search">
2) Set a custom number filter as below
myApp.filter('numFilter', function() {
return function(input, number) {
if(!number) return input;
var tmp = [];
for (var i = 0; i < input.length; i++) {
if (input[i].skill == number) tmp.push(input[i]);
}
return tmp;
}
});
And change your ng-repeat to
<div ng-repeat="player in players | numFilter:search | filter:player_filter">
Working fiddle
In my webapp there are list of check boxes present. What i need is, from back-end am getting a list where data is present, based on this data i want to automatically check the checkbox. If it confusing the below is my code.
html
<span ng-repeat="days in selectDays">
<input type="checkbox" id="{{days}}" ng-model="selectedList[days]" value="{{days | uppercase}}"/>
<label for="{{days}}">{{days}}</label>
</span>
controller
$scope.selectDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
From back end i am getting below data in response
["SUN", "MON"];
below am sharing the snapshot of my page.
My need is to check the response data with $scope.selectDays if it is present then i have to check that respective check box. i.e. if "SUN" is there in the list then i have to check that.
You can use ng-checked
<span ng-repeat="days in selectDays">
<input type="checkbox" ng-checked="response.indexOf(days) !== -1" id="{{days}}" ng-model="selectedList[days]" value="{{days | uppercase}}"/>
<label for="{{days}}">{{days}}</label>
</span>
DEMO
Look it:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div id="wrapper" ng-repeat="x in dayList">
<input type="checkbox" ng-checked="findIt(x.name)">{{x.name}}
</div>
<script>
//module declaration
var app = angular.module('myApp',[]);
//controller declaration
app.controller('myCtrl',function($scope){
$scope.dayList = [{name:'Sun'}, {name:'Mon'}, {name:'Tue'}, {name:'Wed'}, {name:'Thu'}, {name:'Fri'}, {name:'Sat'}];
$scope.marked = ['Sun','Wed'];
$scope.findIt = function(item){
if($scope.marked.indexOf(item)!= -1){return true;}
}
});
</script>
</body>
</html>
Result:
Hope, this helps!
HTML
<div ng-controller="MyCtrl">
<span ng-repeat="days in selectDays">
<input type="checkbox" id="{{days.Day}}" value="{{days.Day | uppercase}}" ng-checked="days.IsCheck"/>
<label for="{{days.Day}}">{{days.Day}}</label>
</span>
</div>
JS
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope, $filter) {
$scope.selected = ['Sun', 'Wed']
$scope.selectDays = [{"Day" : 'Sun',"IsCheck" : false},
{"Day" : 'Mon',"IsCheck" : false}, {"Day" : 'Tue',"IsCheck" : false},
{"Day" : 'Wed',"IsCheck" : false}]
angular.forEach($scope.selected,function(obj,i){
var obj = $filter('filter')($scope.selectDays, { Day: obj })[0];
if(obj != null)
{
obj.IsCheck = true;
}
})
}
Please find jsfiddle link as well
Demo
i want to get the selected checkboxes in my loop, for that check box i have to retrive the amount field onclick.
Here is my HTML script :
<div ng-repeat="$item in items">
Amount :<input ng-model="$item.daily_data.payment_amount">
Check : <input type=checkbox ng-model="checkAmount[$item.daily_data.id]" ng-value="$item.id" >
</div>
<input type="button" ng-click="checkNow()" />
The below script showing all check boxes . i want the only selected one.
JS Script :
$scope.checkAmount = {};
$scope.checkNow(){
console.log($scope.checkAmount);
}
First of all to use functions with $scope you should do something like this:
$scope.checkNow = function() {
...
}
or
$scope.checkNow = checkNow;
function checkNow() {
...
}
About your problem:
You could bind the checkboxes to a property (something like checked), so you can have the items that are checked easily in your controller.
Then, to calculate the total of all checked amount , I' suggest you to use Array.prototype.filter() + Array.prototype.reduce().
Here's a demo based on your original code:
(function() {
angular
.module("app", [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.checkNow = checkNow;
$scope.checkAmount = {};
$scope.items = [
{
"id": 1
},
{
"id": 2
},
{
"id": 3
}
];
function checkNow() {
$scope.total = $scope.items.filter(function(value) {
return value.checked;
}).reduce(function(a, b) {
return a + b.amount;
}, 0);
}
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="$item in items">
<label>
Amount: <input type="number" ng-model="$item.amount">
</label>
<label>
Check: <input type=checkbox ng-model="$item.checked">
</label>
</div>
<button type="button" ng-click="checkNow()">Check now</button>
<hr>
<label for="total">Total</label>
<input type="number" id="total" disabled ng-model="total">
</body>
</html>
i am making dropdown list with input field in angular.js but got no success
the code which i using..
<div ng-app="" ng-controller="namesCtrl">
<h2>filter input</h2>
<input type="text" ng-model="test"/>
<ul>
<li ng-repeat="x in names | filter:test | orderBy : 'name'">
{{ x.name + ',' + x.country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "";
$scope.lastName= "";
});
</script>
<script src="namescontrol.js"></script>
Check the working demo: JSFiddle.
Use a customized filter to perform the filtering. Since ng-model binds to the value key. Whenever key is changed, the items will be filtered and the view will be changed.
angular.module('Joy',[])
.controller('JoyCtrl', ['$scope', function ($scope) {
$scope.items = ['one', 'two', 'three', 'four', 'five'];
$scope.key = '';
$scope.search = function (value) {
return value.indexOf($scope.key) >= 0;
}
}]);
HTML:
<div ng-app="Joy" ng-controller="JoyCtrl">
<input type="text" ng-model="key">
<div>
<li ng-repeat="item in (items | filter:search)" ng-bind="item"></li>
</div>
</div>
Update 1
If you want to hide the list initially: JSFiddle:
$scope.search = function (value) {
return $scope.key !== '' && value.indexOf($scope.key) >= 0;
};
Update 2
I have developed an open source project angular-sui based on Angular and Semantic-UI. There is a directive sui-select, which is exactly what you want. Please check the Demo.
I think what you are looking for is autocomplete functionality. AngularUI offers this through their Typeahead directive. https://angular-ui.github.io/bootstrap/#/typeahead
You want to have something like this:
<input type="text" ng-model="test" typeahead="name for name in names"/>
The directive will dynamically generate the list so you don't need to create that explicitly yourself.