I have a few functions that I'm having to mix because of scope in a < select :
HTML:
<!-- COUNTRY -->
<select class="account--select" type="text" name="country" ng-model="data.country_id"
ng-options="o.code as o.name for o in content.countries" ng-change="reset();PookycountryChanged()">
<option value="">OTHER*</option>
</select>
Directive:
scope.PookycountryChanged = function() {
scope.$watch('data.country_id', function(){
if ('data.country_id' == "OTHER*") {
console.log('this is the other option selected');
}
});
}
AIM:
To be able to have a function run when the value of the option selected is equal to 'OTHER*'. Right now this is set to a simple console.log. Getting nothing in the console at the momento.
Any pointers?
UPDATE with Reset() function:
scope.reset = function(){
scope.isenabled = (scope.data.country_id == content.config.pca_country);
scope.country = _.findWhere(scope.content.countries, {code : scope.data.country_id});
};
scope.reset();
UPDATE 2:
Generated markup:
<select ng-change="reset()" ng-options="o.code as o.name for o in content.countries" ng-model="data.country_id" name="country" type="text" class="account--select ng-scope ng-valid ng-dirty"><option value="" class="">OTHER*</option><option value="0" selected="selected">United Kingdom</option></select>
Now you have a few problems with your code: in PookycountryChanged you not check value for data.country_id just create yet another watch, also in watch you compare string 'data.country_id' with string "OTHER*" so it always false.
In case where you select item with value="" model set value to null so in watch function you can check it like in snippet below.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.reset = function() {
$scope.isenabled = ($scope.data.country_id == $scope.content.config.pca_country);
$scope.country = _.findWhere($scope.content.countries, {
code: $scope.data.country_id
});
};
$scope.content = {
config : {pca_country: 3},
countries: [{
code: 1,
name: 'name1'
}, {
code: 2,
name: 'name2'
}, {
code: 3,
name: 'name3'
}, {
code: 4,
name: 'name4'
}, {
code: 5,
name: 'name5'
}, {
code: 6,
name: 'name6'
}, {
code: 7,
name: 'name7'
}]
};
$scope.$watch('data.country_id', function(newVal) {
if (newVal === null) {
console.log('selected others');
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select class="account--select" type="text" name="country" ng-model="data.country_id" ng-options="o.code as o.name for o in content.countries" ng-change="reset();">
<option value="">OTHER*</option>
</select>
{{country}}
</div>
Or you can avoid even your reset function
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.content = {
config: {
pca_country: 3
},
countries: [{
code: 1,
name: 'name1'
}, {
code: 2,
name: 'name2'
}, {
code: 3,
name: 'name3'
}, {
code: 4,
name: 'name4'
}, {
code: 5,
name: 'name5'
}, {
code: 6,
name: 'name6'
}, {
code: 7,
name: 'name7'
}]
};
$scope.$watch('data.country_id', function(newVal, oldVal) {
if (newVal !== oldVal && !newVal) {
console.log('selected others');
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select class="account--select" type="text" name="country" ng-model="country" ng-options="o.name for o in content.countries" ng-change="data.country_id=country.code;isenabled=country.country_id==content.config.pca_country">
<option value="">OTHER*</option>
</select>
{{country}}
</div>
Remove PookycountryChanged() from your ng-change, then remove the function wrapping your $watch. There is no point having a watcher inside a function since the watch will always be running anyways.
Also change your option to this:
<option value="OTHER*">OTHER*</option>
Then you need to remove the quotation marks around data.country_id:
scope.$watch('data.country_id', function(){
if (data.country_id === "OTHER*") {
console.log('this is the other option selected');
}
});
Related
I have a select drop down,on change of 'Cities' I am getting the value of previous selection not current selection values.For ex: here if I select state and again If I select Cities,the div text comes under state is showing in alert,but I want to show the div text comes under cities.Again I want to display all the value as a message one by one,here I can able to display last value only.Can any one please help me on these 2 issues.Here is the code below.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="x" ng-change="update()">
<option value="city">Cities</option>
<option value="state">States</option>
<option value="country">Countries</option>
</select>
<div ng-repeat="emp in groups" class="test" ng-attr-id="{{emp[attr]}}"><p>{{emp[attr]}}</p></div>
<div class="error">{{col}}</div>
</div>
</div>
Script
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.groups = [{
title: 'title1',
name: 'name1',
details: 'one'
},
{
title: 'title2',
name: 'name2',
details: 'two'
},
{
title: 'title3',
name: 'name2',
details: 'three'
}
]
$scope.update = function() {
if ($scope.x == 'city') {
$scope.id = 'city';
$scope.attr = 'details';
$('div.test').each(function(i,div){
var listitem = div;
$scope.col = $(div).find("p").text();
alert($scope.col);
});
}
if ($scope.x == 'state') {
$scope.id = 'state';
$scope.attr = 'title';
}
if ($scope.x == 'country') {
$scope.id = 'country';
$scope.attr = 'name';
}
}
});
I tested your code, the basic angularjs syntax looks correct and it works.
What you should think about is to avoid mixing jQuery and angularjs. What jQuery can do - You can do with angularjs, the angularjs way, you just need to learn it.
Here's an working example where I removed your jQuery stuff.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.groups = [{
title: 'title1',
name: 'name1',
details: 'details1'
},
{
title: 'title2',
name: 'name2',
details: 'details2'
},
{
title: 'title3',
name: 'name3',
details: 'details3'
}
]
$scope.update = function() {
if ($scope.id == 'city') {
$scope.attr = 'details';
}else if ($scope.id == 'state') {
$scope.attr = 'title';
}else if ($scope.id == 'country') {
$scope.attr = 'name';
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="id" ng-change="update()">
<option value="city">Cities</option>
<option value="state">States</option>
<option value="country">Countries</option>
</select>
<div ng-repeat="emp in groups" class="test" ng-attr-id="{{emp[attr]}}"><p>{{emp[attr]}}</p></div>
<div class="error">{{col}}</div>
</div>
</div>
I am new in angular js i want to put filter in ng-repeat i have json like this
var data = [
{name:test1,b1:{lastValue:0},b2:{lastValue:6},b3:{lastValue:6},b4:{lastValue:0}}
{name:test2,b1:{lastValue:6},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
{name:test3,b1:{lastValue:6},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
]
I want to put filter on lastValue i tested like this
ng-repeat = "d in data | filter:{*.lastValue:filterStatus}"
filterStatus // contain value of filter which user selected but its not working
I don't know how to do this i tried google but nothing found please help me
<input ng-model="filterStatus" type="text">
your filterStatus should hold model value
ng-repeat = "d in data | filter:filterStatus"
var app = angular.module("Profile", []);
app.controller("ProfileCtrl", function($scope) {
$scope.filter_val = {}
$scope.data = [{
name: 'test1',
b1: {
lastValue: 0
},
index: 'b1'
}, {
name: 'test2',
b2: {
lastValue: 6
},
index: 'b2'
}, {
name: 'test3',
b3: {
lastValue: 6
},
index: 'b3'
}, {
name: 'test4',
b4: {
lastValue: 0
},
index: 'b4'
}, {
name: 'test5',
b5: {
lastValue: 89
},
index: 'b5'
}, {
name: 'test6',
b6: {
lastValue: 68
},
index: 'b6'
}]
$scope.own_filter = function(val) {
if (!$scope.filter_val.value)
return true;
else {
return (String(val[val['index']]['lastValue'] || '').indexOf($scope.filter_val.value) != -1)
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Profile" ng-controller="ProfileCtrl">
<input type="text" ng-model="filter_val.value" placeholder="Enter Last Value">
<div class="row" ng-repeat="event in data |filter:own_filter track by $index ">
<h4>{{'Name : ' + event.name}}------{{'Last Value : '+event[event['index']]['lastValue']}}</h4>
</div>
</body>
Use {$:filterStatus} construction:
angular.module('app', []).controller('ctrl',function($scope){
$scope.data = [
{name:'test1',b1:{lastValue:1},b2:{lastValue:6},b3:{lastValue:6},b4:{lastValue:0}},
{name:'test2',b1:{lastValue:2},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}},
{name:'test3',b1:{lastValue:3},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app='app' ng-controller='ctrl'>
<input type='number' ng-model='filterStatus' ng-init='filterStatus=1'>
<ul>
<li ng-repeat='item in data | filter: {$:filterStatus}'>{{item.name}}</li>
</ul>
</div>
I am trying to do a pagination using filters.
There is a list with names and countries.
I am trying to filter them by country and also alphabetical range, and then generate the pagination by numbers. I am really stuck with it. any help will be really appreciate it
The alphabetical filter will retrieve the names that start with the the range of letters. For example if you select the first option [A - M] will return the person that their name start within that range of letters
Here is my code. The html is over there. Thanks
http://jsbin.com/cifowatuzu/edit?html,js,output
angular.module('app',['angular.filter'])
.controller('MainController', function($scope) {
$scope.selectedCountry = '';
$scope.currentPage = 1;
$scope.pageSize = 3;
$scope.pages = [];
//This should store {StartFrom and To from selected Range}
$scope.selectedRange = '';
$scope.AlphabethicalRange = [
{StartFrom: 'A', To: 'M'},
{StartFrom: 'N', To: 'Z'}
];
$scope.Countries = [
{ Name : 'USA'},
{ Name : 'Japan'},
{ Name : 'France'},
{ Name : 'Canada'},
{ Name : 'China'},
];
$scope.People = [
{ Id: 1, Name: 'Will', Country: 'USA'},
{ Id: 2, Name: 'Ed', Country: 'USA' },
{ Id: 3, Name: 'Peter', Country: 'China'},
{ Id: 4, Name: 'John', Country: 'Japan'},
{ Id: 5, Name: 'Alex', Country: 'France'},
{ Id: 6, Name: 'Jim', Country: 'France'},
{ Id: 7, Name: 'Austin', Country: 'Italy'},
{ Id: 8, Name: 'Men', Country: 'France'},
{ Id: 9, Name: 'Zike', Country: 'Canada'},
];
$scope.numberPages = Math.ceil($scope.People.length / $scope.pageSize);
$scope.init = function () {
for (i = 1; i < $scope.numberPages; i++) {
$scope.pages.push(i);
}
};
$scope.init();
});
I create a custom filter to filter the range that you want.
Here's a snippet working:
var app = angular.module('app', ['angular.filter']);
app.controller('mainCtrl', function ($scope) {
$scope.currentPage = 1;
$scope.pageSize = 3;
$scope.pages = [];
$scope.AlphabethicalRange = [
{
"StartFrom":"A",
"To":"M"
},
{
"StartFrom":"N",
"To":"Z"
}
];
$scope.Countries = [
{
"Name":"USA"
},
{
"Name":"Japan"
},
{
"Name":"France"
},
{
"Name":"Canada"
},
{
"Name":"China"
}
];
$scope.People = [
{
"Id":1,
"Name":"Will",
"Country":"USA"
},
{
"Id":2,
"Name":"Ed",
"Country":"USA"
},
{
"Id":3,
"Name":"Peter",
"Country":"China"
},
{
"Id":4,
"Name":"John",
"Country":"Japan"
},
{
"Id":5,
"Name":"Alex",
"Country":"France"
},
{
"Id":6,
"Name":"Jim",
"Country":"France"
},
{
"Id":7,
"Name":"Austin",
"Country":"Italy"
},
{
"Id":8,
"Name":"Men",
"Country":"France"
},
{
"Id":9,
"Name":"Zike",
"Country":"Canada"
}
];
$scope.numberPages = Math.ceil($scope.People.length / $scope.pageSize);
$scope.init = function() {
for (i = 1; i < $scope.numberPages; i++) {
$scope.pages.push(i);
}
};
$scope.init();
});
app.filter('rangeAlphaFilter', function() {
return function(items, search) {
if (!search || search == ' - ') {
return items;
}
return items.filter(function(element) {
return new RegExp('[' + search.replace(/ /g, '') + ']', 'i').test(element.Name[0]);
});
}
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<div>
<span>Country Filter</span>
<select name="countriesSelect" ng-options="c as c.Name for c in Countries" ng-model="selectedCountry">
<option value="">-- Select a country --</option>
</select>
<br>
<span>Alphabetical Filter</span>
<select name="AlphabeticalSelect" ng-options="a as a.StartFrom +' - '+ a.To for a in AlphabethicalRange" ng-model="selectedRange">
<option value="">-- Select a range --</option>
</select>
<ul>
<li ng-repeat="person in People | filter: { Country: selectedCountry.Name } | rangeAlphaFilter: selectedRange.StartFrom +' - '+ selectedRange.To" ng-bind="person.Name"></li>
</ul>
<span>Pagination Numbers</span>
{{page}}
</div>
</body>
</html>
PS: To control the pagination, I extremely don't recommend you to do it manually, it gives a lot of work. I recommend you to see my answer in this another question, it's like a "mini" tutorial of how to use the angularUtils-pagination. Check it.
I hope it helps.
I'm showing 8 checkboxes using ng-repeat and filtering the data by getting only checked values and showing them in comma separated list using another ng-repeat. But I need to show the exact filtered comma separated string in a textbox and update just as it is getting updated inside ng-repeat.
<div class="col-md-7">
<label class="checkbox" ng-repeat="tooth in teeth">
<input type="checkbox" ng-model="tooth.checked" ng-change="upperRight()" /> {{tooth.id}}
</label>
</div>
<div class="col-md-3">
<span ng-repeat="toothObj in teeth | filter:{ checked: true }">{{toothObj.id}}{{$last ? '' : ', '}}</span>
<input type="text" ng-model="selectedTeeth" />
</div>
Controller
$scope.teeth = [
{ id: 1, checked: false },
{ id: 2, checked: false },
{ id: 3, checked: false },
{ id: 4, checked: false },
{ id: 5, checked: false },
{ id: 6, checked: false },
{ id: 7, checked: false },
{ id: 8, checked: false }
];
Here I added it in plunker for better understanding Plunker URL
I just did it in following way
My controller
$scope.teethUR = [{ id: 1, checked: false }, { id: 2, checked: false }, { id: 3, checked: false }, { id: 4, checked: false }, { id: 5, checked: false }, { id: 6, checked: false }, { id: 7, checked: false }, { id: 8, checked: false }];
$scope.upperRight = function () {
$scope.URSelected = "";
for (var i = 0; i < $scope.teethUR.length; i++) {
if ($scope.teethUR[i].checked == true) {
if ($scope.URSelected == "") {
$scope.URSelected = $scope.teethUR[i].id;
} else {
$scope.URSelected = $scope.URSelected + ", " + $scope.teethUR[i].id;
}
}
}
}
And HTML
<div class="col-md-7">
<label class="checkbox" ng-repeat="tooth in teethUR">
<input type="checkbox" ng-model="tooth.checked" ng-change="upperRight()" /> {{tooth.id}}
</label>
</div>
<div class="col-md-3">
<input type="text" ng-model="URSelected" class="form-control" />
</div>
Have a look at the working code here PLUNKER DEMO
Demo
You can set up two-way binding between the textbox and the checkboxes. When you click the checkboxes, the text box is updated, and when you update the text box, the check boxes are updated.
First, setup two watches: one that watches teeth, and another that watches selectedTeeth:
$scope.$watch ('teeth', function(newVal) {
$scope.selectedTeeth = [];
for(var i = 0; i < newVal.length; ++i) {
if (newVal[i].checked)
$scope.selectedTeeth.push(newVal[i].id);
}
}, true);
$scope.$watch('selectedTeeth', function(newVal) {
for (var j = 0; j < $scope.teeth.length; ++j) {
var tooth = $scope.teeth[j];
if (newVal.indexOf(tooth.id) >= 0) {
tooth.checked = true;
}
else {
tooth.checked = false;
}
}
}, true);
Next set up a ngModel directive, that provides a formatter and a parser to marshal between the 'teeth' and 'selectedTeeth' and vice versa:
app.directive ('teethTextBox', function() {
return {
restrict: 'A',
require: 'ngModel',
scope: { ngModel: '=' },
link:function(scope, element, attr, ngModelController) {
ngModelController.$formatters.push(function(value) {
return value;
});
ngModelController.$parsers.push(function(value) {
var numbers = [];
var tmp = value.split(',');
for (var i = 0; i < tmp.length; ++i) {
numbers.push(parseInt(tmp[i]))
}
return numbers;
});
}
}
});
Hook up the directives in the HTML:
<body ng-controller="MainCtrl">
<div class="col-md-7">
<label class="checkbox" ng-repeat="tooth in teeth">
<input type="checkbox" ng-model="tooth.checked" ng-change="upperRight()" /> {{tooth.id}}
</label>
</div>
<div class="col-md-3">
<input type="text" ng-model="selectedTeeth" teeth-text-box />
</div>
</body>
I use Angular, this is my view:
<div class="col-sm-6" ng-repeat="contact in service.contacts">
<label class="control-label mb10">{{contact.textDescription | decodeURIComponent}}</label>
<select multiple="multiple" selectize>
<option>{{contact.value}}</option>
</select>
</div>
I have one problem and I can't figure out a way to solve it. For contact.textDescription, I need to put only unique values, so if that contact.textDescription is duplicate, don't create field twice, but add that contact.value to options of that same contact.textDescription which already exists.. So, something like this:
if(contact.textDescription is duplicate) {
contact.value.addTo(contact.textDescription which already exists)
}
Maybe some filter to apply or?
By the understanding of what you mentioned I think the filter mention in the following answer will help you to do what you want
Use this link to go to the question
You can use ng-options to group and display unique value.
You can use uniqFilter of angular-filter module.
Usage: collection | unique: 'property' or nested.property
Aliases: uniq
Example:
JS:
function MainController ($scope) {
$scope.orders = [
{ id:1, customer: { name: 'John', id: 10 } },
{ id:2, customer: { name: 'William', id: 20 } },
{ id:3, customer: { name: 'John', id: 10 } },
{ id:4, customer: { name: 'William', id: 20 } },
{ id:5, customer: { name: 'Clive', id: 30 } }
];
}
HTML:
<th>Customer list:</th>
<tr ng-repeat="order in orders | unique: 'customer.id'" >
<td> {{ order.customer.name }} , {{ order.customer.id }} </td>
</tr>
RESULT:
Customer list:
- John 10
- William 20
- Clive 30
Grouping your contacts by textDescription should resolve your problem. Try something like this:
html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - GroupBy Filter</title>
<script src="angular-1.4.7.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="MainController">
<div ng-repeat="(key, contacts) in (service.contacts | groupBy: 'textDescription')">
<label class="control-label">{{key}}</label>
<select multiple="multiple" selectize>
<option ng-repeat="contact in contacts">{{contact.value}}</option>
</select>
</div>
</div>
</body>
script.js:
var app = angular.module("app", []);
app.controller("MainController", function ($scope) {
$scope.service = {};
$scope.service.contacts = [{
"textDescription": "td1",
"value": "1"
}, {
"textDescription": "td2",
"value": "2"
}, {
"textDescription": "td3",
"value": "3"
}, {
"textDescription": "td1",
"value": "4"
}, {
"textDescription": "td3",
"value": "5"
}, {
"textDescription": "td1",
"value": "6"
}];
});
app.filter('groupBy', function () {
var results={};
return function (data, key) {
if (!(data && key)) return;
var result;
if(!this.$id){
result={};
}else{
var scopeId = this.$id;
if(!results[scopeId]){
results[scopeId]={};
this.$on("$destroy", function() {
delete results[scopeId];
});
}
result = results[scopeId];
}
for(var groupKey in result)
result[groupKey].splice(0,result[groupKey].length);
for (var i=0; i<data.length; i++) {
if (!result[data[i][key]])
result[data[i][key]]=[];
result[data[i][key]].push(data[i]);
}
var keys = Object.keys(result);
for(var k=0; k<keys.length; k++){
if(result[keys[k]].length===0)
delete result[keys[k]];
}
return result;
};
});
Now you have all the contacts grouped by textDescription, so the field for it (<label>) is created only once and the values are added to <option> tags