I have my angularjs view in wich I must populate my select box with value saved in database, and to allow for other options to be selected. I have tryed like this:
<div class="form-group">
<label class="control-label" for="status">Status zaposlenika</label>
<div class="controls">
<select required name="status" class="form-control" ng-model="employee.status" ng-options="statusType.name for statusType in statusTypes" >
</select>
</div>
But my value is not populated in my view. ( {{employee.status}} - > "test" )
$scope.statusTypes = [
{
name: 'test'
},
{
name:'Test1'
},
{
name: 'Test2'
},
{
name:'Test3'
}
];
How can I do this ?
EDIT
My model employee.status is populated with value "test". But my select box is not. Othe values are listed as items for selection. How can I set default value that is saved in my database to be pre-selected in my select box.
Your model employee.name is a string and selectbox is bound to an object similar to {name: "Test1"}. So if you want to select option from statusTypes you have to find corresponding object in array of object.
$scope.statusTypes = [
{name: 'Test1'},
{name: 'Test2'},
{name: 'Test3'}
];
var selectedStatus = $scope.statusTypes.filter(function(type) {
return type.name = 'Test2';
})[0];
$scope.employee = {
status: selectedStatus
};
So you have to make employee.status to be one of the objects from statusTypes array.
Or other option is to continue to use string for employee.status and change ngOptions to bind to a string instead of object:
ng-options="statusType.name as statusType.name for statusType in statusTypes"
Related
I have a JSON saved that has plenty information:
I am able to fill a select menu with all the names of each element inside the JSON this way:
<select ng-model="car.marca" ng-options="item.brakeId as item.name for item in fillBreaks" class="form-control cforms" required>
<option value="" disabled selected>Sleccionar Marca</option>
</select>
Getting this as result: a select menu filled with the names:
I am able to get the BreakId of the selected element, in this case is saved in 'car.marca' using ng-model.
ng-model="car.marca"
My question is, Based on the selected element lets say 'BrakeId: 9' how can I display the rest of the information of that selected id?
I want to display the price, description, stock, and so on.
You can get the selected object by doing a find on fillBreaks (should be fillBrakes?) for an object with a matching brakeId using ng-change like below. This will allow you to display the additional brake information while keeping car.marca true to holding just a brakeID.
var exampleApp = angular.module('exampleApp', []);
exampleApp.controller('ExampleController', ['$scope', function($scope) {
$scope.car = null;
$scope.fillBreaks = [
{ brakeId: 0, name: 'Brake A', description: 'Good brakes', price: 100, stock: 1 },
{ brakeId: 1, name: 'Brake B', description: 'Great brakes', price: 200, stock: 1 },
{ brakeId: 2, name: 'Brake C', description: 'The best brakes', price: 300, stock: 1 }
];
$scope.brakeInfo = null;
$scope.getBrakeInfo = function(brakeId) {
$scope.brakeInfo = $scope.fillBreaks.find(function(item){return item.brakeId == brakeId});
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="exampleApp" ng-controller="ExampleController">
<select ng-model="car.marca" ng-options="item.brakeId as item.name for item in fillBreaks" ng-change="getBrakeInfo(car.marca)" class="form-control cforms" required>
<option value="" disabled selected>Sleccionar Marca</option>
</select>
<p>{{ brakeInfo }}</p>
</div>
You can change your ng-options to grab the entire selected object, instead of just it's ID.
ng-options="item as item.name for item in ctrl.fillBreaks"
See this JSFiddle for example
P.S. A little trick to remove the Placeholder option from the dropdown is to add style="display: none;" to it, so that it can't be intentionally selected; also illustrated in the JSfiddle
I am using angularjs for my application.I am using multiple checkbox selection and storing it in database in the format [1,2,3,4,5].For example if the checkbox selected is 1 then i am storing the value as 1.If multiple are selected then 1,2,3, and so on.
Here is the html
<div class="col-xs-12">
<div data-ng-repeat="healthStatus in HealthStatuses">
<input id="chkCustomer_{{healthStatus.Value}}" value="
{{healthStatus.Value}}" type="checkbox"
data-ng-checked="selection.indexOf(healthStatus.Value) > -1"
data-ng-click="toggleSelectionHealthStatus(healthStatus.Value)" />
{{healthStatus.Name}}</label>
</div>
</div>
Here is the controller.js
$scope.HealthStatuses = [{
Name: 'Alzheimers',
Value: 1,
Selected: false
}, {
Name: 'Arthritis',
Value: 2,
Selected: false
},{
Name: 'Cancer',
Value: 3,
Selected: false
},{
Name: 'Cellulitis',
Value: 4,
Selected: false
}];
Here is how i am pushing the selected checkboxes value
$scope.selectionHealthStatus=[];
$scope.toggleSelectionHealthStatus = function toggleSelection(Value) {
var idx = $scope.selectionHealthStatus.indexOf(Value);
if (idx > -1) {
$scope.selectionHealthStatus.splice(idx, 1);
} else {
$scope.selectionHealthStatus.push(Value);
}
};
Now while retrieving the data i want the checkboxes to be checked.But now it is not happening.
Here is how i am retrieving the data
userPageService.getHealthStatus().then((data) => {
data = data.data;
$scope.formData = data;
});
If i put console for $scope.formData this is what i get.
participantIllnessAndDisability:"[1, 2, 3, 4]"
Here participantIllnessAndDisability is one field with multiple checkboxes selected.Now what i want to do is after adding the data while viewing i want the selected checkboxes to be checked.I am getting the data from database in [1,2,3] format.The datatype for field participantIllnessAndDisability in database is String.
At load of page, the function on ng-checked won’t get automatically called. Hence it won’t check the check box.
You could assign ng-model or ng expression to checked property and initialize it from controller on data load.
Update:
Please try this.
userPageService.getHealthStatus().then((data) => {
data = data.data;
$scope.formData = data;
$scope.HealthStatuses.forEach((o) => o.Selected = JSON.parse(data.participantIllnessAndDisability).includes(o.Value));
});
i am seeing the example here https://docs.angularjs.org/api/ng/directive/select and this have 3 select with the same value, how can i have different values selected in my options?
i have this:
<li ng-repeat="tarea in tareas">
<input type="checkbox" ng-model="tarea.COMPLETADA" ng-change="updTarea(tarea.ID)"/>
<span class="done-{{tarea.COMPLETADA}}" >{{tarea.NAME}} {{tarea.CLASIFICADORES}}</span>
<select ng-model="selectedOpt"
ng-options="clasificador.NAME for clasificador in clasificadores">
</select>
<button class="buttons delete right" ng-click="delTarea(tarea.ID)"> Eliminar</button>
</li>
so i can have 5,10,15 options, and i want to make a selected item with the value that i have in tarea.CLASIFICADORES, i tried with this
$scope.selectedOpt = $scope.clasificadores[1]
but that make all the options with the same value, like in the example...
how can i make different selected item in my options dynamically with a value i have in my ng-repeat in every item?
i load the data with ajax...
my problem is to set the default selected item with the tarea.CLASIFICADORES. for example, i have a todo list that have a classifier, i want my ng-options to select by default my database value clasifier when the page is load
The problem is, that you are using the same scope variable for all selections. You could store the selected options in an array too like this:
function TestCtrl($scope) {
$scope.items = [
{ id: 1, class: 1 },
{ id: 2, class: 2 },
{ id: 3, class: 1 },
];
$scope.classes = [
{ name: "class 1", id: 1},
{ name: "class 2", id: 2},
{ name: "class 3", id: 3}
];
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="TestCtrl">
<div ng-repeat="currentItem in items">
<select ng-model="selectedClass[$index]" ng-init="selectedClass[$index]=(classes|filter:{id: currentItem.class})[0]" ng-options="class.name for class in classes track by class.id" >
</select>
selected class: {{selectedClass[$index]}}
</div>
</div>
</div>
In this example I take use of the variable $index, which is set by the ng-repeat directive. As the name suggests it contains the current index of the repeat-loop.
UPDATE
I updated the code-snippet so it sets the default value for each select input.
The different items now contain a field with the id of the corresponding class. I initialize the select input with ng-init. With this directive I set selectedClass[$index] which is the selected value for the current item. As we only have the class-id as a property of the items I use a filter to find the corresponding class object with the id (classes|filter:{id: currentItem.class})[0]
To get rid of the filter you could just set the class of each item to the full class-object instead of the id.
Code in controller:
$scope.infoOptions = [
{ name: 'Select Option', value: '0' },
{ name: 'Some Option', value: '1' }
];
HTML:
<select data-ng-model="nothing" data-ng-options="info.name for info in infoOptions ">
</select>
Angular puts that damn empty option at the top/selected by default. I've seen some answers to this question that suggest selecting a default option in the $scope for the form, but this select box is in a template in a dynamic form (ie. can be a number of select boxes). This is really only for demonstration purposes - is there anyway I can get rid of that empty option in a template?
I have drop down inside ng-repeat as follows.
<div ng-model="list in lists">
<div>
<select ng-model="pType" ng-options="c.name in projType"></select>
<option value="{{list.value}"></option>
</div>
My Controller is
App.controller('pOverCtrl', function ($scope, pOverRepository, $location) {
$scope.lists = projOverRepository.query();
$scope.projType = [
{ value: '0', name: 'None Selected' },
{ value: '1', name: 'Construction' },
{ value: '2', name: 'Maintenance' },
];
})
The dropdown gets populated fine. But my goal is that when ng-repeat is executed it automatically shows the value that is coming from lists scope as selected.
Please let me know how to fix this issue.
use the diretive ng-selected
<div ng-model="list in lists">
<select ng-model="pType" ng-options="c.name in projType">
<option ng-selected="list.value == list.selected" value="{{list.value}"></option>
</select>
</div>
assuming that list.selected variable contains the value of the option selects
$scope.pType should have the selected value as it's bind by ng-model.
Read the docs here: http://docs.angularjs.org/api/ng/directive/select
And if you already have the selected value in $scope.lists, you can use the ngSelected directive.