This is my code what's wrong in this
<select name="countryName" class="form-control" ng-model="twoFAData.country" style="height:35px">
<option ng-repeat="country in contriesWithCode" value="{{country[2]}}" ng-selected="accountDetailsRes.country == country[2]">{{country[1]}} ({{country[0]}})</option>
</select>
In the JS I defined this
$scope.defaultCountry = "USA";
$rootScope.accountDetailsRes = {country: $scope.defaultCountry, state: "selectstate"}; // its default country
Thanks In advance
To start, I would recommend you to use ng-options instead of ng-repeat when having many dropdown options as it performs better.
<select ng-options="country[0] as country[0].concat(' ('+country[1]+')') for
country in contriesWithCode" ng-model="twoFAData.country"
name="countryName" class="form-control" style="height:35px">
</select>
Then, if you want a default value just set $scope.twoFAData.country = 'USA' or $scope.twoFAData.country = $scope.defaultCountry.
app.controller('BaseController', function($scope) {
$scope.defaultCountry = "USA";
$scope.twoFAData = {};
$scope.twoFAData.country = $scope.defaultCountry;
$scope.contriesWithCode = [['USA', 'United States'], ['ARG', 'Argentina']];
});
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
$scope.formData = {
people : 2
}
$scope.people = [
{ id: 1, first: 'John', last: 'Rambo', actor: 'Silvester' },
{ id: 2, first: 'Rocky', last: 'Balboa', actor: 'Silvester' },
{ id: 3, first: 'John', last: 'Kimble', actor: 'Arnold' },
{ id: 4, first: 'Ben', last: 'Richards', actor: 'Arnold' }
];
});
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div ng-app="myapp">
<fieldset ng-controller="FirstCtrl">
<select
ng-model="formData['people']">
<option ng-repeat="item in people" value="{{item['id']}}">{{item['first']}}</option>
</select>
{{people[formData['people']]['first']}} {{people[formData['people']]['last']}} - {{people[formData['people']]['actor']}}
</fieldset>
</div>
Related
Am looking for angularjs multiple condition filter like this arr in array | filter:filters.search | filter:{company: selectedName} | filter:{voucher_type: both } It working but not filtering all condition am pasting my full code here . filter:{company: selectedName} | filter:{voucher_type: both } this filter step is wrong in my code.#Thank you for response
<html >
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<title>search</title>
</head>
<body>
<div ng-app="app" ng-controller="mainCtrl">
<div><select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<input type="text" ng-model="both">
<div>Search by Name: <input type="text" ng-model="filters.search"></div>
<div ng-repeat="arr in array | filter:filters.search | filter:{company: selectedName} | filter:{voucher_type: both } ">
<span ng-bind="arr.name"></span>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.9.0.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
$scope.names = ["x", "y"];
$scope.filters = {
x: false,
company: '',
search: ''
};
$scope.actions = {
updateyCompany: function () {
if($scope.filters.y) {
$scope.filters.company = 'y';
} else {
$scope.filters.company = '';
}
}
};
$scope.both ="z";
$scope.array = [
{name: 'Tobias', lname: 'TLname', company: 'x'},
{name: 'Jeff', lname: 'JLname', company: 'x'},
{name: 'Brian', lname: 'BLname', company: 'x'},
{name: 'Igor', lname: 'ILname', company: 'y'},
{name: 'James', lname: 'JLname', company: 'z'},
{name: 'Brad', lname: 'BLname', company: 'y'},
{name: 'Basil', lname: 'Basil', company: 'z'},
];
});
</script>
</body>
</html>
Field voucher_type is not available in your array so, it can not find out. Please add this field and make filter working Properly. !!!
am make some changes it work fine now filter:valFilter filter is changed and new function is added
$scope.valFilter = function (arr) {
return (arr.company == "z" || arr.company == $scope.selectedName);
}
Thank you all
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 use angularjs 1.4.3 and when i use ngOPtions, angular insert the type of the value into the value attribut.
You can see here: http://jsfiddle.net/8bqfq9eb/9
What i want: Insert the value without it's type.
The problem is, ngOptions insert the type of the value into the value attribut and produce this: number:n (n is a number, now this is the id).
JS:
//used version 1.4.3
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
$scope.box = {};
$scope.box.people = [
{ id: 1, first: 'John', last: 'Rambo', actor: 'Silvester' },
{ id: 2, first: 'Rocky', last: 'Balboa', actor: 'Silvester' },
{ id: 3, first: 'John', last: 'Kimble', actor: 'Arnold' },
{ id: 4, first: 'Ben', last: 'Richards', actor: 'Arnold' }
];
$scope.box.selectedPerson = $scope.box.people[0].id;
});
HTML:
<form method="POST">
<div ng-app="myapp">
<fieldset ng-controller="FirstCtrl">
<select name="selectedPerson" id='sel'
ng-options="p.id as p.first for p in box.people track by p.id"
ng-model="box.selectedPerson"></select>
{{ box.selectedPerson }}
<div class="show" ng-click="show();"></div>
<input type="submit" />
</fieldset>
</div>
</form>
You have to add a track by to avoid this :
<select name="selectedPerson" id='sel'
ng-options="p.id as p.first for p in box.people track by p.id"
ng-model="box.selectedPerson"></select>
But anyway, this new way to generate HTML by AngularJS have no impact on your ng-model. It means that you will have no trouble by using your value in ng-model
Working Fiddle
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');
}
});
In my controller I have this:
$scope.participants = [
{
name: "Alan",
birthday: new Date("1991/01/21"),
takePart: true,
},
{
name: "Leandro",
birthday: new Date("1991/01/21"),
takePart: true,
},
{
name: "Alejandro",
birthday: new Date("1991/03/21"),
takePart: true,
}
]
And I'm showing them in my View doing this:
<select name="" id="">
<option ng-repeat="p in participants">{{ p.name }}</option>
</select>
I want to show each one information in some place when I select one of them in the select html element. Is there a way to bind the object?
Use ng-options on your select box, and give it a ng-model. When the select is changed the model will hold the object represented by the selected item.
After that just use the model to display
<select ng-model="currentItem"
ng-options="participant.name for participant in participants">
</select>
<div>
{{currentItem.name}}<br/>
{{currentItem.birthday}}<br/>
{{currentItem.takePart}} </div>
</div>
Demo
var app = angular.module("test",[]);
app.controller("Test",function($scope){
$scope.participants = [
{
name: "Alan",
birthday: new Date("1991/01/21"),
takePart: true,
},
{
name: "Leandro",
birthday: new Date("1991/01/21"),
takePart: true,
},
{
name: "Alejandro",
birthday: new Date("1991/03/21"),
takePart: true,
}
];
$scope.currentItem = $scope.participants[0];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="Test">
<select ng-model="currentItem" ng-options="participant.name for participant in participants">
</select>
<div>
{{currentItem.name}}<br/>
{{currentItem.birthday}}<br/>
{{currentItem.takePart}} </div>
</div>
While ng-options is better, this is your way:
HTML:
<select name="" ng-model="test" ng-change="hello()" id="">
<option ng-repeat="p in participants">{{ p.name }}</option>
</select>
<p>{{pt.name}} - {{pt.birthday}} - {{pt.takePart}}</p>
JS:
$scope.participants = [
{
name: "Alan",
birthday: new Date("1991/01/21"),
takePart: true,
},
{
name: "Leandro",
birthday: new Date("1991/01/21"),
takePart: true,
},
{
name: "Alejandro",
birthday: new Date("1991/03/21"),
takePart: true,
}
]
$scope.test=$scope.participants[0].name;
$scope.pt=$scope.participants[0];
$scope.hello = function(){
angular.forEach($scope.participants, function(item){
if(item.name==$scope.test){
$scope.pt = item;
}
})
};
Fiddle Here
(Sorry for the variable names ;))