Related
How to bind drop down field value in another input field using meanjs.
Hi all Please look at this Plunker i have created,
What I exactly looking is first we select school in plunker then we select school section, then there is a one input filed is available so what i need is section need to bind in that input text field...
for example :- if we select 7A (or) 8A in section dropdown, this section value needs to bind that input field, now it's showing error like '[object Object]'...so how to do this.
My Html:-
<div>
<label>1. Without array value</label>
<select ng-model="question" ng-options="item.title for item in questions">
</select>
</div>
<div style="margin-top: 11px;">
<label>2. With comments array value</label>
<select style="margin-left: 20px;" ng-model="class" ng-options="item.commentText for item in question.comments">
</select>
{{class.commentText}}
</div>
<div>
<input type="text" ng-model="newclass" ng-bind="newclass=class"/>
</div>
Input Field:-
<div>
<input type="text" ng-model="newclass" ng-bind="newclass=class"/>
</div>
My Data :-
$scope.questions = [
{
"_id": "59df6c37b6748bc809050699",
"user": {
"_id": "59df6a76b6748bc809050697",
"profileImageURL": "modules/users/client/img/profile/default.png"
},
"__v": 1,
"openeyers": [],
"openeyes": 0,
"upvoters": [],
"upvotes": 0,
"isLiked": false,
"users": [],
"comments": [
{
"created": 1507897712831,
"email": "ms#e21designs.com",
"name": "Maniselvam selvam",
"link": "https://drive.google.com/drive/u/0/folders/0B5c-p1bvkfS9REJHMGhMY1BTV1k",
"commentText": "7A"
}
],
"questionid": "",
"title": "Silver jublie",
"created": "2017-10-12T13:20:55.383Z"
},
{
"_id": "59df6c37b6748bc809050699",
"user": {
"_id": "59df6a76b6748bc809050697",
"displayName": "Maniselvam selvam",
"dob": "1991-05-10T07:00:00.000Z",
"profileImageURL": "modules/users/client/img/profile/default.png"
},
"__v": 1,
"openeyers": [],
"users": [],
"comments": [
{
"created": 1507897712831,
"email": "ms#e21designs.com",
"name": "Maniselvam selvam",
"link": "https://drive.google.com/drive/u/0/folders/0B5c-p1bvkfS9REJHMGhMY1BTV1k",
"commentText": "8A"
}
],
"questionid": "",
"title": "Public School",
"created": "2017-10-12T13:20:55.383Z"
}
]
There are two ways to do that first
Simple set input ng-model to class.commentText something like
<input type="text" ng-model="class.commentText" />
But this will result in change in select option if you change input
Second way
asssign value to newClass on select value change
<select style="margin-left: 20px;" ng-model="class" ng-change="newClass=class.commentText" ng-options="item.commentText for item in question.comments">
</select>
<input type="text" ng-model="newClass" />
Working demo
How to remove empty and blank values in the Drop Down using ng-option in angular js?
Some data's are in college name some of it not having the college name so what is happening in the drop down, the empty values are displaying.
I am expecting only values, not empty blank items, so how to remove empty items.
My Plunker.
And how to Mingle College Name and School Name into a single Drop Down.
My Drop Down:-
<select data-ng-model="searchtable.college_name" id="searchtable" ng-options="item.college_name as item.college_name for item in users" class="form-control" placeholder="search" required><option value="">All</option></select>
<label for="">school name</label>
<select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.school_name as item.school_name for item in users" class="form-control" placeholder="search" required><option value="">All</option></select>
My Html:-
<div class="col-md-3">
<label for="">College name</label>
<select data-ng-model="searchtable.college_name" id="searchtable" ng-options="item.college_name as item.college_name for item in users" class="form-control" placeholder="search" required>
<option value="">All</option>
</select>
<label for="">school name</label>
<select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.school_name as item.school_name for item in users" class="form-control" placeholder="search" required>
<option value="">All</option>
</select>
<div ng-repeat="question in users | filter: searchtable | filter: myrole"> <small>
<table border="0">
<tbody>
<th>{{question.displayName}}</th>
<th style="background: yellow;">,{{question.roles[0]}}</th>
<th style="background: light;">,{{question.request_role[0]}}</th>
</tbody>
</table>
</small> </div>
<p>How to mingle college name and school name into single drop down:-</p>
<p>And how to do filter college name and school name while selecting the filed</p>
</div>
My Data:-
$scope.users = [{
"_id": "59a6c7c96c2ce324124cc1d8",
"displayName": "blink foundation",
"provider": "local",
"location": "icf",
"username": "blink",
"dob": "1991-10-04T18:30:00.000Z",
"phone": 7299345250,
"religion": "Hindu",
"college_name": "Arignar Anna",
"__v": 2,
"created": "2017-08-30T14:12:25.397Z",
"roles": [
"block"
],
"request_role": [
"Change Agent"
],
"lastName": "foundation",
"firstName": "blink"
},
{
"_id": "598abfe4cce8ed582a2d8b32",
"displayName": "avinaash muthukumar",
"provider": "local",
"username": "avinaash muthu",
"__v": 0,
"created": "2017-08-09T07:55:16.511Z",
"roles": [
"admin"
],
"request_role": ["Change Agent"],
"firstName": "avinaash"
},
{
"_id": "5979a591c999e9302caece13",
"displayName": "Ajmal Afthab",
"provider": "local",
"location": "Urapakkam",
"username": "ajmal_afthab",
"dob": "1995-01-23T18:30:00.000Z",
"phone": 9500269131,
"religion": "Islam",
"school_name": "public school",
"__v": 1,
"roles": [
"kp"
],
"request_role": ["school student"],
"categories": [
"Religion & Culture",
"Moral Ethics",
"Social Psychology"
],
"lastName": "Afthab",
"firstName": "Ajmal"
},
{
"_id": "5978a2886d5b10ec321a2114",
"displayName": "happy selvam",
"provider": "local",
"username": "happy",
"__v": 0,
"created": "2017-07-26T14:09:12.730Z",
"roles": [
"admin"
],
"request_role": ["parent"],
"categories": [],
"lastName": "selvam",
"firstName": "happy"
},
{
"_id": "58e73c5c9e2f3f1421e241be",
"displayName": "sarawana kumar",
"religion": "hindu",
"college_name": "IIT",
"__v": 2,
"roles": [
"user"
],
"request_role": ["school student"],
"categories": [
"Religion & Culture",
"Social Psychology"
],
"lastName": "kumar",
"firstName": "sarawana"
},
{
"_id": "58d0fab62758cc482c295eba",
"displayName": "avinaash kumaran",
"provider": "local",
"username": "avinaash",
"roles": [
"block"
],
"request_role": ["parent"],
"categories": [],
"lastName": "kumaran",
"firstName": "avinaash"
},
]
You can use a filter (or write a custom filter) to remove the blank options for your first case.
HTML:
<select data-ng-model="searchtable.college_name" id="searchtable" ng-options="item.college_name as item.college_name for item in users | filter:{ college_name :'!!'}" class="form-control" placeholder="search" required>
<option value="">All</option>
</select>
<label for="">school name</label>
<select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.school_name as item.school_name for item in users | filter:{ school_name :'!!'}" class="form-control" placeholder="search" required>
<option value="">All</option>
</select>
Now for your second case, if you want to combine both school and colleges into one dropdown, just add the following. Use a custom filter to return non empty values.
HTML
<select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.college_name +''+ item.school_name for item in users|filter:notBlank" class="form-control" placeholder="search" required><option value="">All</option></select>
JS:
$scope.notBlank= function(item){
return (item.college_name || item.school_name)
}
Working Plunker: http://plnkr.co/edit/QF5rnghuIWfcdeQdbAvd?p=preview
How can i filter category values in list, when clicking on a radio button?
My Plunker
Actually I want to filter category values in list of questions.
we have user data's and question data's in plunker.
user has two categories like "categories": ["Religion & Culture","Social Psychology"],.
question has various of categoryin list.
I am exactly looking to filter user categories values only, in that question category lists.
For Example :- in plunker we have displayed category values using of ng-repeat. the user categories array values are displayed using of two radio buttons, 1.Religion & Culture 2. Social Psychology. if we click the first radio button of Religion & Culture it's should filter only the Religion & Culture in question lists and if we click the second radio button of Social Psychology it's should filter only the religon & Culture values in question lists. .
My HTML radio button:-
<ul>
<li ng-repeat="mani in users" ><input type="radio" name="myquestion" data-ng-model="myquestion" ng-value="{{mani.categories[0]}}" id="{{mani.categories[0]}}"><label for="{{mani.categories[0]}" >{{mani.categories[0]}}</label>
</li>
<li ng-repeat="mani in users" ><input type="radio" name="myquestion" data-ng-model="myquestion" ng-value="{{mani.categories[1]}}" id="{{mani.categories[1]}}"><label for="{{mani.categories[1]}" >{{mani.categories[1]}}</label>
</li>
</ul>
My HTML Filter:-
ng-repeat="question in questions | filter:myquestion"
My Html Data:-
<div ng-repeat="question in questions | filter:myquestion">
<small>
<span >{{$index + 1}}.</span>
<span >{{question.category}}</span>
</small>
</div>
My Controller User Data:-
$scope.users=[
{
"_id": "58e73c5c9e2f3f1421e241be",
"displayName": "sarawana kumar",
"provider": "local",
"location": "chennai",
"username": "sarawana",
"dob": "1991-10-04T18:30:00.000Z",
"phone": 7299345250,
"religion": "hindu",
"__v": 0,
"created": "2017-04-07T07:14:36.773Z",
"roles": [
"user"
],
"category": [],
"profileImageURL": "modules/users/client/img/profile/default.png",
"email": "sarawana#gmail.com",
"categories": [
"Religion & Culture",
"Social Psychology"
],
"lastName": "kumar",
"firstName": "sarawana"
}]
My Question Data:-
$scope.questions = [
{
"_id": "5863d3aaacaeddc00663bc07",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "2016-12-22T18:30:00.000Z",
"location": "chennai",
"religion": "hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
},
"friend_tag": [],
"emotion": "Confused",
"category": "Religion & Culture",
"content": "mani",
"title": "Who Is the best Player?",
"created": "2016-12-28T15:00:58.777Z"
},
{
"_id": "5863d3aaacaeddc00663bc07",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "2016-12-22T18:30:00.000Z",
"location": "chennai",
"religion": "hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
},
"friend_tag": [],
"emotion": "Confused",
"category": "Moral Ethics",
"content": "mani",
"title": "Who Is the best Player?",
"created": "2016-12-28T15:00:58.777Z"
},
{
"_id": "5863d3aaacaeddc00663bc07",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "2016-12-22T18:30:00.000Z",
"location": "chennai",
"religion": "hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
},
"friend_tag": [],
"emotion": "Confused",
"category": "Social Psychology",
"content": "mani",
"title": "Who Is the best Player?",
"created": "2016-12-28T15:00:58.777Z"
},
{
"_id": "5863d3aaacaeddc00663bc07",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "2016-12-22T18:30:00.000Z",
"location": "chennai",
"religion": "hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
},
"friend_tag": [],
"emotion": "Confused",
"category": "Environment & Health",
"content": "mani",
"title": "Who Is the best Player?",
"created": "2016-12-28T15:00:58.777Z"
},
{
"_id": "5863d3aaacaeddc00663bc07",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "2016-12-22T18:30:00.000Z",
"location": "chennai",
"religion": "hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
},
"friend_tag": [],
"emotion": "Confused",
"category": "Religion & Culture",
"content": "mani",
"title": "Who Is the best Player?",
"created": "2016-12-28T15:00:58.777Z"
},
{
"_id": "5863d3aaacaeddc00663bc07",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "2016-12-22T18:30:00.000Z",
"location": "chennai",
"religion": "hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
},
"friend_tag": [],
"emotion": "Confused",
"category": "Religion & Culture",
"content": "mani",
"title": "Who Is the best Player?",
"created": "2016-12-28T15:00:58.777Z"
},
{
"_id": "5863d3aaacaeddc00663bc07",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "2016-12-22T18:30:00.000Z",
"location": "chennai",
"religion": "hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
},
"friend_tag": [],
"emotion": "Confused",
"category": "Social Psychology",
"content": "mani",
"title": "Who Is the best Player?",
"created": "2016-12-28T15:00:58.777Z"
}
]
Plunker for reference.
We don't know where i did a mistake so please look my plunker for reference and help me.. please update the plunker as well to know the exact solution...thanks.
i have created similar answer please check this plunker http://plnkr.co/edit/1Zzc6nRylgETOvQp3SI2?p=preview i am exactly looking for the same answer in this plunker filtering the values but i want to filter user categories array values.....
Please refer this and we will improve code and filtering
code
I wrote this method
$scope.changed = function (category) {
$scope.result = [];
angular.forEach($scope.questions, function(question) {
if(question.category === category) {
$scope.result.push(question);
}
});
};
I think the problem is just because you used {{...}} inside of an ngValue, which is not necessary.
And also you tried to use myquestion to filtre your datas. But you setted this value for every items in ngRepeat in the same variable. So you need to use an array or different variable depending on the ngRepeat item (or don't use ngRepeat if you have only 1 user) like this :
<div class="col-md-3" ng-init="myquestion = []">
<ul ng-repeat="mani in users">
<li>
<input type="radio" name="myquestion" data-ng-model="myquestion[$index]" ng-value="mani.categories[0]" id="{{mani.categories[0]}}">
<label for="{{mani.categories[0]}" >{{mani.categories[0]}}</label>
</li>
<li>
<input type="radio" name="myquestion" data-ng-model="myquestion[$index]" ng-value="mani.categories[1]" id="{{mani.categories[1]}}">
<label for="{{mani.categories[1]}" >{{mani.categories[1]}}</label>
</li>
</ul>
Look a this plunker
If you want to filter your list dynamically then better solution would be filter data directly instead of using angular ng-repeat filter.
So all you need to do is just add $scope.filteredUsers that will be the result of filtering $scope.users each time the user chagnes radio button state.
You can accomplish it bu using ng-change directive along with your radio button.
Hovewer, if you still want to filter your data using directive, you need to write your own filter. Consider looking at this question and relative solutions.
angular.module('myApp', []).controller('candidateCtrl', function($scope) {
$scope.candidates = [
{name:'Goutam',role:'Engineer',country:'Norway'},
{name:'Carl',role:'Engineer',country:'Sweden'},
{name:'Margareth',role:'Doctor',country:'England'},
{name:'Hege',role:'Engineer',country:'Norway'},
{name:'Joe',role:'Engineer',country:'Denmark'},
{name:'Gustav',role:'Doctor',country:'Sweden'},
{name:'Birgit',role:'Teacher',country:'Denmark'},
{name:'Mary',role:'Engineer',country:'England'},
{name:'Kai',role:'Teacher',country:'Norway'}
];
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">
<div class="container" ng-controller="candidateCtrl">
<h2>Bootstrap inline Radio Buttons</h2>
<div class="row">
<div class="col-lg-4">
<p>Angular JS Filter by Radio Button</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Engineer">Engineer
</label>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Doctor">Doctor
</label>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Teacher">Teacher
</label>
</form>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Profession</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="candidate in candidates | filter:searchText:strict">
<td>{{candidate.name}}</td>
<td>{{candidate.role}}</td>
<td>{{candidate.country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
angular.module('myApp', []).controller('candidateCtrl', function($scope) {
$scope.candidates = [
{name:'Goutam',role:'Engineer',country:'India'},
{name:'Carl',role:'Engineer',country:'Sweden'},
{name:'Margareth',role:'Doctor',country:'England'},
{name:'Hege',role:'Engineer',country:'Norway'},
{name:'Joe',role:'Engineer',country:'Denmark'},
{name:'Rathin',role:'Doctor',country:'India'},
{name:'Birgit',role:'Teacher',country:'Denmark'},
{name:'Mary',role:'Engineer',country:'England'},
{name:'Kai',role:'Teacher',country:'Norway'}
];
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">
<div class="container" ng-controller="candidateCtrl">
<h2>Bootstrap inline Radio Buttons</h2>
<div class="row">
<div class="col-lg-4">
<p>Angular JS Filter by Radio Button</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Engineer">Engineer
</label>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Doctor">Doctor
</label>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Teacher">Teacher
</label>
</form>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Profession</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="candidate in candidates | filter:searchText:strict">
<td>{{candidate.name}}</td>
<td>{{candidate.role}}</td>
<td>{{candidate.country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
I am using MEAN stack in my application with AngularJS as my front-end. How can i use typeahead in input filed to get the values in angularjs , actually we get the value if we using select option, but we expecting for type-ahead option ...please look into plunker for the reference My Plunker.
In plunker first select option used to get the without array values.
Second select option are used to get the value in array of user. so we used like ng-options="item.user.displayName for item in questions"
But we expecting for typeahead option to get the displayNmae values in array of user. so we used like typeahead="item as item.user.displayName for item in questions | filter:$viewValue | limitTo:8" But we could't get the answer...
what we exactly looking in third input filed if we type a name the drop down should need to display...
Please if any one knows the solution ,please update plunker as well to know the solution.
My Data:-
$scope.questions = [
{
"_id": "583433ddc021a5d02949a51b",
"user": {
"_id": "5834336ac021a5d02949a51a",
"displayName": "mani R",
"location": "ICF",
"dob": "1991-10-05T18:30:00.000Z",
"religion": "Christian",
"roles": [
"user"
],
"profileImageURL": "modules/users/client/img/profile/default.png"
},
"__v": 0,
"upvoters": [],
"category": "Moral Ethics",
"content": "Dhoni",
"title": "which batsman is best in the world?",
"created": "2016-11-22T12:02:37.376Z"
},
{
"_id": "582c34b3ff26bd603e1e5383",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [],
"users": [],
"comments": [
{
"created": 1479365394684,
"email": "ms#e21designs.com",
"name": "Table 1",
"commentText": "Dhoni"
}
],
"friend_tag": [],
"emotion": "Confused",
"category": "Environment & Health",
"content": "sachin?",
"title": "who is best player in this world?",
"created": "2016-11-16T10:28:03.859Z"
},
{
"_id": "582c3418ff26bd603e1e5382",
"user": {
"_id": "582c1f4b53cf7fec2ddf282e",
"displayName": "selvam R",
"dob": "1991-10-04T18:30:00.000Z",
"roles": [
"kp"
],
"profileImageURL": "modules/users/client/img/profile/default.png"
},
"__v": 0,
"upvoters": [],
"category": "Environment & Health",
"content": "he is tennis player",
"created": "2016-11-16T10:25:28.835Z"
},
{
"_id": "582ad554714543e037cf3bf2",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [
"ms#e21designs.com"
],
"upvotes": 1,
"category": "Moral Ethics",
"created": "2016-11-15T09:28:52.403Z"
},
{
"_id": "5821e7c667b70aac2b8fdfdc",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [
"ms#e21designs.com"
],
"upvotes": 1,
"category": "Religion & Culture",
"created": "2016-11-08T14:57:10.354Z"
}
]
My Html:-
<div style="margin-top: 20px;">
<label style="color: green;">3. Typeahead Not Working</label>
<input ng-model="friend" typeahead-min-length="3" typeahead="item as item.user.displayName for item in questions | filter:$viewValue | limitTo:8">
</div>
We got the answer with the help of Mr.J-Mean, but We have one more problem , if we type the name like table 1 in Typeahead input, it's showing like three Table 1 names , if we have same names are in our data means we expecting to show only one name like Table 1 please help us...please update your answer in plunker as well to know the solution....thanks
To make this working it will required plugin- I have used Typeahead of UI Bootstrap
Please find solution to your problem
(function () {
'use strict';
var app = angular.module('TypeaheadDemo', ['ui.bootstrap', 'ngTagsInput']);
app.controller('TypeaheadCtrl', function ($scope, $http, $filter) {
var _selected;
$scope.questions = [
{
"_id": "583433ddc021a5d02949a51b",
"user": {
"_id": "5834336ac021a5d02949a51a",
"displayName": "mani R",
"location": "ICF",
"dob": "1991-10-05T18:30:00.000Z",
"religion": "Christian",
"roles": [
"user"
],
"profileImageURL": "modules/users/client/img/profile/default.png"
},
"__v": 0,
"upvoters": [],
"category": "Moral Ethics",
"content": "Dhoni",
"title": "which batsman is best in the world?",
"created": "2016-11-22T12:02:37.376Z"
},
{
"_id": "582c34b3ff26bd603e1e5383",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [],
"users": [],
"comments": [
{
"created": 1479365394684,
"email": "ms#e21designs.com",
"name": "Table 1",
"commentText": "Dhoni"
}
],
"friend_tag": [],
"emotion": "Confused",
"category": "Environment & Health",
"content": "sachin?",
"title": "who is best player in this world?",
"created": "2016-11-16T10:28:03.859Z"
},
{
"_id": "582c3418ff26bd603e1e5382",
"user": {
"_id": "582c1f4b53cf7fec2ddf282e",
"displayName": "selvam R",
"dob": "1991-10-04T18:30:00.000Z",
"roles": [
"kp"
],
"profileImageURL": "modules/users/client/img/profile/default.png"
},
"__v": 0,
"upvoters": [],
"category": "Environment & Health",
"content": "he is tennis player",
"created": "2016-11-16T10:25:28.835Z"
},
{
"_id": "582ad554714543e037cf3bf2",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [
"ms#e21designs.com"
],
"upvotes": 1,
"category": "Moral Ethics",
"created": "2016-11-15T09:28:52.403Z"
},
{
"_id": "5821e7c667b70aac2b8fdfdc",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [
"ms#e21designs.com"
],
"upvotes": 1,
"category": "Religion & Culture",
"created": "2016-11-08T14:57:10.354Z"
}
]
$scope.filterTags = function ($query) {
var filterList = $filter('filter')($scope.questions, $query); //filter the data
var removedDuplicate = $filter('unique')(filterList, 'user.displayName');//Removed duplicates
return angular.forEach(removedDuplicate, function (question) {
question.custName = question.user.displayName;
});
return removedDuplicate;
};
});
app.filter('unique', function () {
return function (items, filterOn) {
if (filterOn === false) {
return items;
}
if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
var hashCheck = {}, newItems = [];
var extractValueToCompare = function (item) {
if (angular.isObject(item) && angular.isString(filterOn)) {
return item[filterOn];
} else {
return item;
}
};
angular.forEach(items, function (item) {
var valueToCheck, isDuplicate = false;
for (var i = 0; i < newItems.length; i++) {
if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
newItems.push(item);
}
});
items = newItems;
}
return items;
};
});
})();
<!doctype html>
<html >
<head>
<title>Test</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.js"></script>
</head>
<body ng-app="TypeaheadDemo">
<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">
<div>
<label>1. Without array value</label>
<select ng-model="class" ng-options="item.category for item in questions"></select>
</div>
<div style="margin-top: 11px;">
<label>2. With array value</label>
<select style="margin-left: 20px;" ng-model="class" ng-options="item.user.displayName for item in questions"></select>
</div>
<div style="margin-top: 20px;">
<label style="color: green;">3. Typeahead is Working Now:</label>
<input ng-model="friend" typeahead-min-length="3" uib-typeahead="item as item.user.displayName for item in questions | filter : $viewValue | unique:'user.displayName'">
</div>
<div class="searchinput autosearchinput">
<tags-input display-property="custName" add-on-enter="true" add-on-blur="true" add-from-autocomplete-only="true" placeholder="tag friends" ng-model="friends" title="tag friends">
<auto-complete min-length='1' source="filterTags($query)"></auto-complete>
</tags-input>
</div>
</div>
</body>
</html>
I am using MEAN stack in my application with AngularJS as my front-end. How can I filter the count and quality fields,My Plunker For example:- In the Count drop down list is yarn count , carn count ,burn count.. if I select the yarn count that particular transaction only need to display....Please look at my plunker and help us.My Plunker
How I should customize My JSON to work with the array inside an array (or) How I should make ng-repeat inside ng-repeat to achieve above given scenario.
My Html :-
<div class="col-md-6 form-group form-group-default">
<label>Count</label>
<select data-ng-model="searchtable.count" id="count" ng-options="item.colorshades[0].count for item in sryarnorders" class="form-control">
<option value="">All</option>
</select>
</div>
And
<div class="col-md-6 form-group form-group-default">
<label>Quality</label>
<select data-ng-model="searchtable.quality" id="quality" ng-options="item.colorshades[0].quality for item in sryarnorders" class="form-control" >
<option value="">All</option>
</select>
</div>
My data-ng-model:-
data-ng-model="searchtable.count"
And
data-ng-model="searchtable.quality"
My Filter code:-
filter:searchtable.count.colorshades[0].count
filter:searchtable.quality.colorshades[0].quality
My Data:-
$scope.sryarnorders = [
{
"_id": "579ef3adba3bac040b583b4f",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 1,
"colorshades": [
{
"_id": "579ef3feba3bac040b583b51",
"quality": "Home Textiles",
"count": "carn count"
},
{
"_id": "579ef3feba3bac040b583b50",
"quality": "Hall Textiles",
"count": "yarn count"
}
],
"created": "2016-08-01T07:01:01.181Z",
"ex_india_date": "2016-08-08",
"supplier_name": "Msd",
"buyer_name": "Mani selvam .R"
},
{
"_id": "5768e6c8bdbc5db509f0f2b2",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 1,
"colorshades": [
{
"_id": "5768e6fcbdbc5db509f0f2b3",
"quality": "Hall Textiles",
"count": "carn count"
}
],
"created": "2016-06-21T07:03:36.504Z",
"ex_india_date": "2016-06-22",
"supplier_name": "Msd",
"buyer_name": "Rohit"
},
{
"_id": "5767cd78f5012d790aa41a7b",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 3,
"colorshades": [
{
"_id": "5767ce37f5012d790aa41a7c",
"quality": "yarn quality",
"count": "burn count"
}
],
"created": "2016-06-20T11:03:20.382Z",
"ex_india_date": "2016-06-21",
"supplier_name": "Mani selvam",
"buyer_name": "ms"
}
I have created Plunker for reference:- My Plunker
The select model always returns the full object in the array, not what you set as value. For example, when selecting "yarn count" in your plunker, searchtable.count equals to
{"_id":"573d7fa0760ba711126d7de5","user":{"_id":"5721a378d33c0d6b0bb30416","displayName":"ms ms"},"__v":1,"colorshades":[{"_id":"573d7fc3760ba711126d7de6","quality":"Home Textiles","count":"yarn count"},{"_id":"579ef3feba3bac040b583b50","color":"56a5b6831746bc1c0b391c7c","quality":"Hall Textiles","count":"carn count"}],"created":"2016-05-19T08:56:00.997Z","actual_delivery_date":"2016-05-19","ex_india_date":"2016-05-19","ex_factory_date":"2016-05-19","po_delivery_date":"2016-05-19","supplier_name":"Fsa","buyer_name":"e21"}
Given this, there are two solutions:
1. Filter accordingly
Filter like that:
| filter:searchtable.count.colorshades[0].count | filter:searchtable.quality.colorshades[0].quality
Which doesn't look clean.
2. Changing Options
You can also change the ng-options like this:
item.colorshades[0].count as item.colorshades[0].count for item in sryarnorders
Which will make ng-model return only item.colorshades[0].count. You will still have to adjust the filter:
| filter:searchtable.count | filter:searchtable.quality
It might be possible to make that cleaner, I am going to have to look into that.
Yes Finnaly I have Found the solution, What I did changed the ng-module , and filter.... my Plunker...