I have two select's who uses the same list. When i choose the option "Foo" from select A the same option "Foo" must be hidden on select B. Any ideia how to do it with AngularJS ? I'm trying something like this
<div class="col-md-6">
<label>
Testemunha 1 :
</label>
<select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha1"
ng-options="obj as obj.pessoa.nome for obj in lstTestemunha">
<option></option>
</select>
</div>
<div class="col-md-6">
<label>
Testemunha 2 :
</label>
<select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha2"
ng-options="obj as obj.pessoa.nome for obj in lstTestemunha ">
<option></option>
</select>
</div>
$scope.esconderTestemunhaSelecionada = function(obj){
if($scope.lstTestemunha.includes(obj)){
$scope.lstTestemunha.style.display = "none";
return $scope.lstTestemunha;
}
}
You could use a filter on your second select. This will filter the items in the second select such that the item selected in the first does not appear. If you need it to be more complex (for example, this will cause the second select to not have any options until something is selected in the first select which may be an undesirable side effect) you can always write your own custom filter.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.selectItems = [];
$scope.selectedItemA = {};
$scope.selectedItemB = {};
for (let i = 1; i <= 10; i++) {
$scope.selectItems.push({
id: i,
name: 'Item #' + i
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div>
Select Item A:
<select ng-model="selectedItemA" ng-options="item as item.name for item in selectItems"></select>
</div>
<div>
Select Item B:
<select ng-model="selectedItemB" ng-options="item as item.name for item in selectItems | filter: { id: '!' + selectedItemA.id }"></select>
</div>
</div>
I solved this problem not the way that i'd like but works fine.
<div class="col-md-6">
<label>
Testemunha 1 :
</label>
<select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha1"
ng-options="obj as obj.pessoa.nome for obj in lstTestemunha">
<option></option>
</select>
</div>
<div class="col-md-6">
<label>
Testemunha 2 :
</label>
<select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha2" ng-disabled="!notificacaoOrientativa.testemunha1"
ng-options="obj as obj.pessoa.nome for obj in lstTestemunha | filter: {pessoa:{ id: '!' + notificacaoOrientativa.testemunha1.pessoa.id }}">
<option></option>
</select>
</div>
I'm forcing the user to set the first select and filter the second according to the first.
By the way, sry my poor english.
Related
i have this select, with id category and product. If a choose one option in the select category, the other should list all products in that category.
var json = JSON.parse(xhr.responseText);
console.log('value: '+e.value);
for(var x in json) {
console.log(x+' -> id: '+json[x]['id']);
var all = document.getElementById(target).querySelector("#all");
document.getElementById(target).innerHTML = '';
document.getElementById(target).appendChild(all);
var data = json[x];
if(e.value == '*') {
console.log('add ('+data['id']+', '+data['nome']+')');
var child = document.createElement("option");
child.setAttribute("value", data['id']);
child.innerText = data['nome'];
document.getElementById(target).appendChild(child);
} else {
if(data['categoria'].id == e.value) {
console.log('add ('+data['id']+', '+data['nome']+')');
var child = document.createElement("option");
child.setAttribute("value", data['id']);
child.innerText = data['nome'];
document.getElementById(target).appendChild(child);
}
}
}
<div class="row">
<div class="col-sm">
Category:
<select class="form-control" id="category" data-target="product" th:attr="data-url=#{/produto/listBy.json}" onchange="fill_produtos(this);">
<option value="*">All</option>
<option th:each="option : ${categories}" th:value="${option.id}">
<span th:each="t : ${option.nome}" th:if="${#strings.equals(#strings.substringBefore(t.idioma,','), #strings.replace(#locale,'_','-'))}" th:href="#{/categoria/__${t.conteudo}__}" th:text="${t.conteudo}"></span>
</option>
</select>
</div>
<div class="col-sm">
Produto:
<select class="form-control" id="product">
<option id="all" value="*">All</option>
<option th:each="option : ${produtos}" th:value="${option.id}" th:text="${option.nome}"></option>
</select>
</div>
<div class="col-sm">
Date Range: <input type="date" class="form-control"> a <input type="date" class="form-control">
</div>
</div>
Right now, this is not happening as expected. I have this 3 categories (named one, two and three), each one with 1 product (prod1, prod2 and prod3). I select categories one or two, no products are listed on the other select; if I select category three or all, only the product three are listed on the other select.
Except that the debug code (the console.log) added to the function seems to follow the right path when I click each option on category: if I click one, only the message inside the if(data['categoria'].id == e.value) is shown; same for two and three. If click all, all messages are shown, as expected, due the instruction telling to do so after if(e.value == '*').
Anyone can see what I am doing wrong here? I know I am missing something, but I can't see what is.
I am working on C#/MVC application with angularJS. I need to display dropdown on popup, If record already have value then by default that value should be selected otherwise default option choose an option.
I am able to bind dropdown and If I debug I am getting correct ng-model value but its displaying blank.
Here is controller code on pop up open click
$scope.ShowAdPopup = function (adId) {
$scope.Popup.CategoryId = 0;
$scope.Popup.InterestId = 0;
$scope.Popup.SourceId = 0;
var filteredData = $filter('filter')($scope.gridAdData, { id: adId }, true);
if (filteredData.length > 0) {
$scope.Popup.Id = filteredData[0].id;
$scope.Popup.AdId = filteredData[0].adId;
$scope.Popup.AdName = filteredData[0].adName;
$scope.Popup.Category = filteredData[0].category;
$scope.Popup.Interest = filteredData[0].interest;
$scope.Popup.Source = filteredData[0].source;
$scope.Popup.AdUrl = filteredData[0].adUrl;
$scope.Popup.CategoryId = filteredData[0].categoryId;
$scope.Popup.InterestId = filteredData[0].interestId;
$scope.Popup.SourceId = filteredData[0].sourceId;
}
$("#divAddGroup").modal({ show: true, backdrop: 'static', keyboard: false });
}
And html is as below
<div class="form-group">
<label class="col-sm-3 control-label">Category</label>
<!--<div class="col-sm-9">
<input type="text" name="category" class="form-control" ng-model="Popup.Category" />
</div>-->
<div class="col-sm-9">
<select class="form-control" name="categoryDrp" ng-model="Popup.CategoryId">
<option value="">-- choose an option --</option>
<option ng-repeat="item in CategoryData" value="{{item.id}}">{{item.categoryName}}</option>
</select>
</div>
Now If I debug and I can see CategoryId setting correct id . e.g. 7 or 8 or 9 which CategoryData have already but its display 'blank' as first option if Id is available
If CategoryId is null then it display '-- choose an option --' which is correct
Try ng-selected="item.id == Popup.CategoryId" as :
<select class="form-control" name="categoryDrp" ng-model="Popup.CategoryId">
<option value="">-- choose an option --</option>
<option ng-repeat="item in CategoryData" value="{{item.id}}"
ng-selected="item.id == Popup.CategoryId">{{item.categoryName}}</option>
</select>
I've started learning Angularjs. I was following w3schools tutorial and I needed to try out something.
Here I want to list the dropdown according to the radio button I've checked. (When I select Name, I need only the names in dropdown, when I select City, I need only the Cities in dropdown and so on).
<body ng-app="myApp" ng-controller="myController">
<div>
<input type="radio" ng-model="selection" value="Name">Name
<input type="radio" ng-model="selection" value="Country">Country
<input type="radio" ng-model="selection" value="City">City
<br>
<div ng-switch="selection">
<div ng-switch-when="Name">
<ul>
<li ng-repeat="x in names">{{x.Name}}</li>
</ul>
</div>
<div ng-switch-when="Country">
<ul>
<li ng-repeat="x in names">{{x.Country}}</li>
</ul>
</div>
<div ng-switch-when="City">
<ul>
<li ng-repeat="x in names">{{x.City}}</li>
</ul>
</div>
</div>
<br>
<select ng-model="selectedName" ng-options="x.Name for x in names"></select>
</div>
</body>
And this is the angular script file.
var app = angular.module('myApp',[]);
app.controller('myController', function($scope,$http){
$http.get('http://www.w3schools.com/angular/customers.php')
.then(function(response){
$scope.names = response.data.records;
});
});
If I'm understanding correctly, for your <select> element you want to conditionally display the label based on the selection from the ng-model="selection" radio input item. You can use a function within your ng-options to target a property for the label based on the selection passing in both the item being iterated as well as the selection from the radio inputs:
JS:
$scope.foo = function(x, selection) {
switch(selection) {
case 'Name':
return x.Name;
break;
case 'City':
return x.City;
break;
case 'Country':
return x.Country;
default:
return x.Name;
}
}
HTML:
<select ng-model="selectedName" ng-options="x.Name as foo(x, selection) for x in names"></select>
Here is a Plunker showing ng-options with as syntax utilizing a function for conditional label dropdown display.
Hopefully that helps!
You could combine your ng-repeat's and use a filter on the options.
html
<select class="form-control" ng-model="selectedName">
<option value="" selected disabled>Select Name</option>
<option ng-repeat="n in names" value="{{n.Name}}">{{n.Name | filter:isSelection('Name')}}</option>
<option ng-repeat="n in names" value="{{n.Country}}">{{n.Country| filter:isSelection('Country')}}</option>
<option ng-repeat="n in names" value="{{n.City}}">{{n.City| filter:isSelection('City')}}</option>
</select>
JS
$scope.isSelection = function(x){
return x == $scope.selection;
}
Each ng-repeat uses the filter with a string of what type of selection it is. This will filter out any option that is not of the same selection
I have object (arr) when repeat, he have property charType: select or multiple.
I want if charType is "select" see normal select, but if charType is "multiple" see select with multiple.
Example:
If object (arr) have 5 result 0,1,2 is charType 'select' and 3,4 charType is 'multiple'.I want to see
0 select
1 select
2 select
3 select with multiple
4 select with multiple
<div class="form-group" ng-repeat="att in arr track by $index">
<div class="col-md-3">
<label for="phone" ng-model="type">{{att.name}}</label>
</div>
<div class="col-md-9">
({{att.charType}})
<select class="form-control" ng-model="charObj.charactValue[att.businessassetID + $index]" ng-if="att.charType == 'select' ? 'multiple' : 'multiple=true'">
<option ng-repeat="itemss in att.value track by $index" value="{{itemss}}">{{itemss}}</option>
</select>
<div class="text-center"><a class="insertStore" data-toggle="modal" data-target="#addCharacteristicValue" ng-click="getObj(att)">Добави</a>
</div>
</div>
</div>
Here is a working snippet :
Use ng-options instead of ng-repeat in option tag
Remove track by index make select fail
Use a simple ng-if to generate two differents select.
There isn't ng-multiple directive it seems, so i went for the ng-if workaround.
angular.module("app", []).controller("ctrl", function($scope){
$scope.arr = [{charType:'select', name:'select', value:[1, 2]},{charType:'multiple', name:'multiple', value:[1,2]}];
$scope.charObj = {characterValue:{}};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="form-group" ng-repeat="att in arr track by $index">
<div class="col-md-3">
<label for="phone" ng-model="type">{{att.name}}</label>
</div>
<div class="col-md-9">
({{att.charType}})
<select ng-if="att.charType == 'select'" class="form-control" ng-model="charObj.charactValue[att.businessassetID + $index]" ng-options="itemss for itemss in att.value">
</select>
<select ng-if="att.charType != 'select'" multiple class="form-control" ng-model="charObj.charactValue[att.businessassetID + $index]" ng-options="itemss for itemss in att.value">
</select>
</div>
</div>
selected : {{charObj.charactValue}} <br />
</div>
I have the following code and I cant get it to work with unique filter.
Also on jsfiddle it isn't working. In my HTML, the select is populated but unique filter is not working.
https://jsfiddle.net/krayziekry/sw8dvy3u/
Thank you
<div ng-app="example" ng-controller="exampleCtrl">
<!-- Select Basic -->
<div class="form-group span6">
<label class="control-label" for="from">Calatorind de la</label>
<div>
<select id="from" name="from" class="form-control" ng-model="selected.valp">
<option value="">Selecteaza...</option>
<option ng-repeat="rec in myRecs | filter: {vals: selected.vals} | orderBy:'plecare' | unique: 'plecare'" value="{{rec.valp}}">{{rec.plecare}}</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group span6">
<label class="control-label" for="to">catre</label>
<div>
<select id="to" name="to" class="form-control" ng-model="selected.vals">
<option value="">Selecteaza...</option>
<option ng-repeat="rec in myRecs | filter: {valp: selected.valp} | orderBy:'plecare'" value="{{rec.vals}}">{{rec.sosire}}</option>
</select>
</div>
</div>
</div>
<script>
angular.module('example', []).controller('exampleCtrl', function($scope) {
$scope.myRecs = [{
valp: 'AHO',
plecare: 'Alghero (AHO)',
sosire: 'Torino - Caselle (TRN)',
vals: 'TRN'
}, {
valp: 'ATH',
plecare: 'Atena (ATH)',
sosire: 'Constanta (CMD)',
vals: 'CMD'
}, {
valp: 'ATH',
plecare: 'Atena (ATH)',
sosire: 'Larnaca (LCA)',
vals: 'LCA'
}, {
valp: 'ATH',
plecare: 'Atena (ATH)',
sosire: 'Londra - Luton (LTN)',
vals: 'LTN'
}];
});
</script>
As far i Know the unique filter needs to be called from another module 'ui.filters'.
Sorry if my english its not hat good.
I forked your jsfiddle here
You will need to create a custom filter like this:
.filter('unique', function() {
return function(collection, keyname) {
var output = [],
keys = [];
angular.forEach(collection, function(item) {
var key = item[keyname];
if (keys.indexOf(key) === -1) {
keys.push(key);
output.push(item);
}
});
return output;
};
})
And use it like this:
<option ng-repeat="rec in myRecs | unique: 'valp' | orderBy:'plecare'" value="{{rec.valp}}">