In html page i take one select box and put data in them by fetching records from databases like that..
<select id="category" ng-model="eventAdd.data.selCategory" ng-change="changeBg(eventAdd.data.selCategory)">
<option value="">-Select-</option>
<option ng-repeat="photo in photos"
value="{{photo.PhotoId}}">
{{photo.Category}}
</option>
<option value="other">Other</option>
</select>
In select box i add one option "Other" if user select that option i will show one input box there user can enter custom name and i will push it $scope.photos and it will display in selectbox but it can be not be selected.
Photo.allCategory().then(function(photos)
{
$timeout(function()
{
$scope.photos = photos;
},0);
});
$scope.changeBg = function(val)
{
if(val=="other")
{
$cordovaDialogs.prompt('Category name', 'Category', ['Ok','Cancel'], '')
.then(function(result)
{
console.log("call");
var input = result['input1'];
$scope.photos.push({photoId:9,Category:input});
$scope.eventAdd.data.selCategory = 8;
});
}
}
Using this line
$scope.eventAdd.data.selCategory = 3;
Third i item can be selected but when i am doing like
$scope.eventAdd.data.selCategory = $scope.photos.length;
It cannot be selected which last one added by in prompt.
Please check by codepan
http://codepen.io/pareshgami/pen/BooEap
Please help. Thanks for your time.
Related
I have two objects, one of users and one of groups. The user object contains the ids of the groups the user is part of, and the groups object contains the id, name and type of group (i.e. hierarchy).
Examples below:
users = {
"user_id_1": {
id: "user_id_1",
name: "Steve Smith",
username: "ssmith1",
groups: ["group_id_1", "group_id_3",...]
},
...
}
groups = {
"group_id_1": {
id: "group_id_1",
name: "Group 1",
type: "level_1"
},
...
}
The goal is (at least initially) to have two dropdowns, one for groups and one for users. Selecting a group filters the user list to only show users part of that group.
I've been looking at ui-select to create the dropdowns for me (the input box as part of the dropdown is ideal) or just simple typeahead (but it does lack the dropdown options).
For now I have a simple example for the users dropdown:
<select id="user-dropdown">
<option ng-repeat="user in $ctrl.users" value="{{ user.id }}">{{ user.name }}</option>
</select>
The problem is that Angular filters only allow filtering of arrays and not objects.
I had the idea of creating two arrays from the objects:
userArray = [user_id_1, user_id_2, ...];
groupArray = [group_id_1, group_id_2, ...];
<option ng-repeat="user in $ctrl.userArray" value="{{ $ctrl.users[user].id }}">{{ $ctrl.users[user].name }}</option>
Even in this case I had problems filtering this list based on the group, as it no longer has the group available in the object.
Any help or thoughts would be appreciated please.
First, reduce your object to an Array and then on select of group dropdown, filter your users. sample code below:
JS:
$scope.groupArray = [];
for(var prop in $scope.groups){
$scope.groupArray.push($scope.groups[prop]);
}
var userArray = [];
for(var prop1 in $scope.users){
userArray.push($scope.users[prop1]);
}
$scope.onGroupSelect = function(){
$scope.userList = [];
$scope.userList = userArray.filter(function(user){
return user.groups.some(function(group){
return group === $scope.selectedGroup;
})
})
}
HTML:
<select ng-model="selectedGroup" ng-change="onGroupSelect()"
ng-options="group.id as group.name for group in groupArray">
</select>
<br/>
<select ng-model="selectedUser">
<option ng-repeat="user in userList" value="user.id">
{{user.name}}
</option>
</select>
here is the working plunkr for your reference
I am adding employee with designation field in dropdown (say 'Employee'). When I try to edit the profile of employee in another page the designation should display the pre-selected dropdown value with remaining values below.(the selected designation is not displaying first. it is shown as normal dropdown)
I have tried selected="selected"
<select class="form-control edited" id="designation_edit" name="designation_edit" ng-model="designation_edit">
<option value="HR" selected="selected">HR Executive</option>
<option value="Manager">Manager</option>
<option value="Employee">Employee</option>
<option value="Admin">Admin</option>
</select>
I have two modal boxes in my page. One for "add employee" and another for edit profile. When I add an employee with designation value from drop-down as employee, this selected value should be displayed first in edit page 'designation' drop-down with remaining values in the dropdown.
But currently, it is showing as normal dropdown in edit profile page. I need to fetch the selected value from add page and display here.
Help me to come out with this in angularjs.
Is it correct to add the below line in ajax call
$('#designation_edit').attr("selected":"selected");
I have tried:
$('#designation_edit').append('Designation Manager Employee Admin');
Simple way
If you have a Users as response or a Array/JSON you defined, First You need to set the selected value in controller, then you put the same model name in html. This example i wrote to explain in easiest way.
Simple example
Inside Controller:
$scope.Users = ["Suresh","Mahesh","Ramesh"];
$scope.selectedUser = $scope.Users[0];
Your HTML
<select data-ng-options="usr for usr in Users" data-ng-model="selectedUser">
</select>
complex example
Inside Controller:
$scope.JSON = {
"ResponseObject":
[{
"Name": "Suresh",
"userID": 1
},
{
"Name": "Mahesh",
"userID": 2
}]
};
$scope.selectedUser = $scope.JSON.ResponseObject[0];
Your HTML
<select data-ng-options="usr.Name for usr in JSON.ResponseObject" data-ng-model="selectedUser"></select>
<h3>You selected: {{selectedUser.Name}}</h3>
To show selected value you can do as follows
Controller
assign a default value to the ng-model
$scope.empDesignationMapping = {
employee1 : "manager",
employee2 : "HR",
employee3: "Admin"
}
$scope.designation_edit = $scope.empDesignationMapping[employee1] // should be dynamic employee
HTML
<select ng-model="designation_edit" ng-selected="designation_edit" >
after that whenever you select something something it will show as selected.
I'm new to angular, and struggling with updating bound values from a select box that is inside a modal which is populated based on a particular row of data that is "edited" in a table. Currently, I can click edit, the select box populates with the correct values and selected option based on the user row I "edited". My problem is I can update either the ID or the Title of my model but not both. Here is my html select:
<select ng-model="user.team">
<option ng-selected="{{x.id}} === user.team.id" ng-repeat="x in teams" ng-selected="{{x.id}} == {{user.team.id}}" value="{{x.id}}">{{x.title}}</option>
</select>
Note that if I make ng-model="user.team.id" it updates the id correctly in my list, and "user.team.title" updates the title correctly. My scope/model is defined as such and I would like to update both id and title when the option is changed:
$scope.user = {
team :{
id: '',
title: ''
}
};
Can't you just do:
<select ng-model="user.team" ng-options="x.title for x in teams track by x.id"></select>
ng-model will set the initial selection to the option that matches user.team
I am new to bootstrap and i am trying to use the multiselect element in a table to act as a filter selector.
I can get the values chosen by using the onchange event, but how can I get the ID of the field the select element is in? I have tried different variations and combinations of $this, event and .id.
I really need to know what field this select is in or else I can't use it.
(The commented out code on the var fieldId line are some of the options I have tried)
TIA
// Multi select
$('.chosen-select').multiselect({
buttonWidth: '150px',
includeSelectAllOption: true,
enableFiltering: true,
onChange: function(option, checked, select) {
var fieldId = $(option.target)[0]; //=$(this).attr("id"); option.target.id ; $(option).id; $(select).id;
console.log('ID = ' + fieldId +' or '+ this.id + ' Changed option ' + $(option).val() + '.');
},
Add this line to your onChange event:
var selectID = $(option).parent().attr('id');
Here's a full example:
$('#multiSelect1').multiselect({
onChange: function(option, checked) {
var selectID = $(option).parent().attr('id');
}
});
<select id="multiSelect1" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
For events without params, for example: onSelectAll, you might use this way
var selectId = $(this.$select).attr('id');
I am developing a mobile application where there is a view where there are two select tags first select tag consist of options of teams & in the second select tag there are forms associated with team Ids that user select in first select tag. I want to filter the data of second select tag as per the team Id of first select tag on ng-change event.
For the first select tag i have populated as follows:
<select ng-change="showForms(name.id)" ng-model="name" ng-options="f.name for f in devices track by f.id"></select>
my second select tag is this:
<select ><option ng-repeat="formEach in forms" id="{{formEach.Formid}}">{{formEach.Formname}}</option></select>
Here my concern is i dont want to show any forms that are present inside the forms array initially when user is about to select team. When user selects team, the forms with the selected teams id associated should be shown in the second select tag. How the filtering will be occur or is it on same page or through controller. I am familiar with PHP but task is in angular & am new to angularJS.
Thanks in advance for quick response.
Sample data is this:
devices = [
{id : X001, name :'Team 1', icon: 'ion-document-text', status : 'Owner', color : 'brown'},
{id : X002, name :'Team 2', icon: 'ion-document-text', status : 'Owner', color : 'yellow'},
{id : X003, name :'Team 3', icon: 'ion-document-text', status : 'Owner', color : 'black'}
];
forms data is this:
forms= [
{id : AS001, teamid: X001, formname :'Feam 1', icon: 'ion-document-text', status : 'Active'},
{id : AS002, teamid: X001, formname :'Feam 2', icon: 'ion-document-text', status : 'Draft'},
{id : AS003, teamid: X003, formname :'Feam 3', icon: 'ion-document-text', status : 'Draft'}
];
controller code is this: (controller logic is not written as am confused of populating the data as am filling the array at the time of navigation to this view)
$scope.showForms = function(teamId){
}
You can do this by simply following below trick. I've used the same in one of my project.
<select class="custom-select" ng-model="teamName" data-ng-options="f.id as f.name for f in devices" ng-change="updateTeamObject($index, teamName);">
<option value="">Select Team</option>
</select>
and in your second select, just use.
<select class="custom-select" ng-model="deviceForms" data-ng-options="o.id as o.formname for o in forms | filter:{teamid:teamName}">
<option value="">Your team data</option>
</select>
Fiddle
Try this:
<div ng-app>
<div ng-controller="TodoCtrl">
<select ng-change="showForms(name.id)" ng-model="name" ng-options="f.name for f in devices"></select>
<select ng-model="selected">
<option ng-repeat="formEach in forms| filter:{teamid:name.id }" id="{{formEach.id}}">{{formEach.formname}}</option>
</select>
</div>
</div>
Demo: http://jsfiddle.net/U3pVM/15890/
Explanation:
Important part is
ng-repeat="formEach in forms| filter:{teamid:name.id }"
Note how the filter is used. Specify the property (i.e. teamid in your case) where you want the filter to be applied. Since model name stores the selection, you can filter the next select dropdown by using name.id . For testing, just select the last option in the first select dropdown in the demo, the next dropdown will have the filtered results.
You can achieve it by pushing the items you want in the second select tag's array at the time of ng-change event of the first tag
In the ng-change function, push items into the array like this in the controller,
$scope.specifications = [];
angular.forEach($scope.allSpecifications, function(spec) {
if(spec.id == id) {
$scope.specifications.push(spec)
}
});
In Html use that array
<select ng-change="showSpec(car.id)" ng-init="car = carsList[0]" ng-model="car" ng-options="car.name for car in carsList"></select>
<select>
<option ng-repeat="primitive in specifications" id="{{primitive.id}}">{{primitive.name}}</option>
</select>
I have done one plunker with a sample JSON,
Working Plunker
Hope this helps!