I need to set the option value yo id for the rendered select tag, using the following example I can set the option value as 0, 1, ,2.
Any idea what am I doing wrong here?
http://jsfiddle.net/GFF6P/1/
function ctrl($scope) {
$scope.devices = [{
name: "pc1",
id: 10
}, {
name: "pc2",
id: 20
}, {
name: "pc3",
id: 30
}];
$scope.selectedDevice = $scope.devices[0];
}
<div ng-app ng-controller="ctrl">
<select data-ng-model="selectedDevice" name="devices" data-ng-required="true" data-ng-options="device.name for device in devices"></select>
</div>
View
<select data-ng-model="selectedDevice"
name="devices"
data-ng-required="true"
data-ng-options="device.id as device.name for device in devices">
</select>
Controller
$scope.selectedDevice = $scope.devices[0].id;
Updated Fiddle
Related
<select id="e1" style="width:100%" ui-select2 tabindex="-1" ng-init="GetAllAgent()" ng-model="Agent" ng-options="ctr as ctr.AgentName for ctr in ListAgent track by ctr.AgentId" ng-change="GetSubAgentList(Agent.AgentId)">
<option value=""> </option></select>
when it is in edit mode,could not set the default value using the below code
angular.forEach($scope.ListAgent, function (value, index) {
if (value.AgentId == HR.AgentId) {
$scope.Agent = $scope.ListAgent[index];
}
})
$scope.ListAgent= [{ AgentId: "0", AgentName:"Ann" }, { AgentId: "1", AgentName:"Muh" }];
and
HR.AgentId=1
First off, ui-select2 does not support ng-options: https://github.com/angular-ui/ui-select2/issues/252
Further, ui-select2 does not work with ng-repeat: https://github.com/angular-ui/ui-select2/issues/162
The solution is to use input:
<input ui-select2="select2Options" ng-model="Agent"/>
where select2Options is:
$scope.select2Options = {
data:$scope.ListAgent
}
The list should have structure: [{id,text}] so $scope.ListAgent will be
$scope.ListAgent= [{ id:0, text:"Ann" }, { id:1, text:"Muh" }];
Demo Plunker
For place holder add data-placeholder="----"
How can I filter an ng-repeat to show all items where a certain columnfield is an empty string? When I try this by typing nothing in the field it always seem to give the full list (wich is expected). I only want to see the person with id 1. How can I adjust the filter that a certain character in the inputfield makes the ng repeat filter on empty fields for the name column.
FiddleJs Example
My view:
<div class="panel-heading">
<h3>Filtered by {{filterValue}}</h3>
<input ng-change="filter()" ng-model="filterValue"/>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li ng-repeat="p in filteredPeople">
<h4>{{p.name}} ({{p.age}}) id: {{p.id}}</h4>
</li>
</ul>
</div>
Controller:
var people = [{
name: '',
age: 32,
id: 1
}, {
name: 'Jonny',
age: 34,
id: 2
}, {
name: 'Blake',
age: 28,
id: 3
}, {
name: 'David',
age: 35,
id: 4
}];
$scope.filter = function (value) {
$scope.filteredPeople = $filter('filter')(people, {
name: $scope.filterValue
});
}
$scope.people = people.slice(0);
Delete your $scope.filter() function in the controller and the ng-change="filter()" in your view. You should change var people array to $scope.people. You also need to delete the line $scope.people = people.slice(0);.
Create a filter function in your controller to only return people whose name property is empty if $scope.filterValue is empty:
$scope.emptyFilter = function(person) {
if ($scope.filterValue.length === 0) {
if (person.name.length === 0) {
return person;
}
} else {
return person;
}
};
Next, update your ng-repeat with the following:
<li ng-repeat="p in people | filter:emptyFilter | filter:{name: filterValue}">
The following is my code:
<input required class="input form-control" type="text" ng-model="select.mySelect" list="bloodgroups" placeholder="Select Blood Group">
<datalist id="bloodgroups" >
<option ng-repeat="bloodgroup in bloodgroups"> {{bloodgroup.bloodgroups}}
</datalist>
JS
$scope.options = [{ name: "a", id: 1 }, { name: "b", id: 2 }];
$scope.selectedOption = $scope.options[1];
HTML
<select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>
Additional example:
This is in the case of retrieving data (GET) from an external source (url). Something.thisismydata is from factory.
For ng-model="select.mySelect" something like this:
$scope.showDataOnSelect = function() {
var url = "http://example.com/api";
Something.thisismydata(function(data) {
$scope.thisismydata = data;
$scope.select.mySelect = $scope.thisismydata[0].id;
}, url);
}
$scope.showDataOnSelect();
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a form and I want to have two select boxes so that in one of them certain options would show/hide based on the current value of another select box.
e.g
Select box X Options :
A
B
Select box Y Options :
1 // shows only when A is selected in Select box X
2 // A
3 // A
4 // shows only when B is selected in Select box X
5 // B
6 // B
Help please.
The easiest way to set this up is to simply make the secondary collection dependent on the selection of the first one. You can do this any number of ways, but simply swapping out the collection that is bound is your best bet.
A simple example:
(function() {
'use strict';
function InputController() {
var secondary = {
A: [1, 2, 3],
B: [3, 4, 5]
},
vm = this;
vm.primary = ['A', 'B'];
vm.selectedPrimary = vm.primary[0];
vm.onPrimaryChange = function() {
vm.secondary = secondary[vm.selectedPrimary];
};
}
angular.module('inputs', [])
.controller('InputCtrl', InputController);
}());
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<div class="container" ng-app="inputs" ng-controller="InputCtrl as ctrl">
<div class="row">
<div class="col-xs-6">
<h3>Primary</h3>
<select class="form-control" ng-model="ctrl.selectedPrimary" ng-options="item for item in ctrl.primary" ng-change="ctrl.onPrimaryChange()"></select>
</div>
<div class="col-xs-6">
<h3>Secondary</h3>
<select class="form-control" ng-model="ctrl.selectedSecondary" ng-options="item for item in ctrl.secondary"></select>
</div>
</div>
</div>
Though you have not tried anything, I will still show how you can change the value of a select using the value of another select, see this http://jsfiddle.net/HB7LU/10721/
I have taken two similar arrays, and repeated them in select using ng-options
$scope.values = [{
id: 1,
label: 'aLabel',
subItem: 'abc'
}, {
id: 2,
label: 'bLabel',
subItem: 'pqr'
}];
$scope.values2 = [{
id: 1,
label: 'aLabel',
subItem: 'abc'
}, {
id: 2,
label: 'bLabel',
subItem: 'pqr'
}];
<select ng-options="item.label as item.subItem for item in values " ng-model="selected1"></select>
<select ng-options="item2.label as item2.subItem for item2 in values2 " ng-model="selected2" ng-change='fun()'></select>
Now there is no trick here,
You just call a function fun on change of the select number2
$scope.fun=function(){
$scope.selected1=$scope.selected2;
},
and change the model select1 with the value of select2.
Hope this helps.
Okay this worked for me
var propertiesSearchModule = angular.module('propertiesSearchModule');
propertiesSearchModule.controller('searchFormController', ['$scope' ,'$rootScope', function($scope, $rootScope) {
$scope.a = [
{label:'Sale', value:'sale'},
{label:'Rent', value:'rent'}
];
$scope.t = {
residential : {
label:'Residential', value:'residential',
uOptions : [
{label: 'Villa', value: 'villa'},
{label: 'Apartment', value: 'apartment'},
{label: 'Duplex', value: 'duplex'},
{label: 'Office', value: 'office'}
]
},
commercial : {
label:'Commercial', value:'commercial',
uOptions :[
{label: 'Penthouse', value: 'penthouse'},
{label: 'Full floor', value: 'full floor'},
{label: 'Hotel apartment', value: 'hotel apartment'},
{label: 'Warehouse', value: 'warehouse'}
]
}
}
}]);
And here is the HTML
<div data-ng-controller="searchFormController">
<form name="propertiesSearchForm" action="" method="get">
<select name="t" id="select-type" class="search-select" data-ng-options="v.value as v.label for (x,v) in t" data-ng-model="fields.t">
<option value="" selected="selected">Types</option>
</select>
<select name="u" id="select-unit-type" data-ng-options="y.value as y.label for y in t[fields.t].uOptions" data-ng-model="fields.u">
<option value="" selected="selected">Unit Type</option>
</select>
</form>
</div>
Inspired by : http://jsfiddle.net/annavester/Zd6uX/
I have a AngularJS directive that allows users to select a values from a list to filter on. Pretty simple concept which is represented here:
Problem is when I click one of the checkboxes they all select unintended. My directive is pretty simple so I'm not sure why this is happening. The code around the selection and checkboxes is as follows:
$scope.tempFilter = {
id: ObjectId(),
fieldId: $scope.available[0].id,
filterType: 'contains'
};
$scope.toggleCheck = function (id) {
var values = $scope.tempFilter.value;
if (!values || !values.length) {
values = $scope.tempFilter.value = [];
}
var idx = values.indexOf(id);
if (idx === -1) {
values.push(id);
} else {
values.splice(idx, 1);
}
};
$scope.valuesListValues = function (id) {
return $scope.available.find(function (f) {
return f.id === id;
}).values;
};
and the data resembles:
$scope.available = [{
id: 23,
name: 'Store'
values: [
{ id: 124, name: "Kansas" },
{ id: 122, name: "Florida" }, ... ]
}, ... ]
the view logic is as follows:
<ul class="list-box">
<li ng-repeat="val in valuesListValues(tempFilter.fieldId)">
<div class="checkbox">
<label ng-click="toggleCheck(val.id)">
<input ng-checked="tempFilter.value.indexOf(val.id) === -1"
type="checkbox"> {{val.name}}
</label>
</div>
</li>
</ul>
First off, it toggleCheck fires twice but populates the correct data ( second time given my code it removes it though ).
After the second fire, it checks all boxes... Any ideas?
Perhaps its that the local variable doesn't get reassigned to the property of the scope property used in the view. Since your values are then non-existent and not found, the box is checked.
$scope.tempFilter.value = values
I took the interface concept you were after and created a simpler solution. It uses a checked property, found in each item of available[0].values, as the checkbox model. At the top of the list is a button that clears the selected items.
JavaScript:
function DataMock($scope) {
$scope.available = [{
id: 23,
name: 'Store',
values: [{
id: 124,
name: "Kansas"
}, {
id: 122,
name: "Florida"
}]
}];
$scope.clearSelection = function() {
var values = $scope.available[0].values;
for (var i = 0; i < values.length; i++) {
values[i].checked = false;
}
};
}
HTML:
<body ng-controller="DataMock">
<ul class="list-box">
<li>
<button ng-click="clearSelection()">Clear Selection</button>
</li>
<li ng-repeat="val in available[0].values">
<div class="checkbox">
<label>
<input ng-model="val.checked"
type="checkbox" /> {{val.name}}
</label>
</div>
</li>
</ul>
</body>
Demo on Plunker
The repeat that I used to grab the values based on the id, was the problem area.
<li ng-repeat="val in valuesListValues(tempFilter.fieldId)">
removing that and simple listening and setting a static variable resolved the problem.
$scope.$watch('tempFilter.fieldId', function () {
var fId = $scope.tempFilter.fieldId;
if ($scope.isFieldType(fId, 'valuesList')) {
$scope.valuesListValues = $scope.valuesListValues(fId);
}
}, true);
});
and then in the view:
ng-repeat="value in valuesListValues"