Detect same item selection for multiple select/dropdowns with AngularJS - javascript

I am still new with learning all the awesome things Angular can do and one thing I am trying to look at is throwing an ng-invalid if a set of dropdowns have the same item selected.
For example, if I had three selects drop downs, each holding the items: apple, orange, peach. And the user selected apple for drop down 1 and 2, how can I use angular to detect this within the select tag, and throw an ng-invalid?
an example of the current select list I am using are as follows.
<span>
<select ng-options="champ1.cID as champ1.cName for champ1 in Champions1 | orderBy: 'cName'" ng-init="0" ng-model="champ1">{{champ1.cName}}</select>
</span>
<span>
<select ng-options="champ2.cID as champ2.cName for champ2 in Champions2 | orderBy: 'cName'" ng-init="0" ng-model="champ2">{{champ2.cName}}</select>
</span>
<span>
<select ng-options="champ3.cID as champ3.cName for champ3 in Champions3 | orderBy: 'cName'" ng-init="0" ng-model="champ3">{{champ3.cName}}</select>
</span>
Would I use something like ng-if, or toss in some kind of ng-class? I am confused on where/how I would validate in regards to angular without doing some kind of directive or JQuery check.

you can use ui-validate for custom validations
<select ng-options="champ3.cID as champ3.cName for champ3 in Champions3 | orderBy: 'cName'"
ng-init="0" ng-model="champ3"
ui-validate="{'same' : 'champ1 == champ3 || champ2 == cmap3'}">
{{champ3.cName}}
</select>
but above answer only an example. with ui-validate many more custom validations. please read about ui-validate here.
you should read more about forms validations. sample links here/here .

Related

Add fixed item and non-removable item to select2?

I have a mail module and I want to add the mentioned (in the photo) email or hr#example.com to be fixed selected and non-removable option in cc in a multi selection select2. How may I achieve this? any idea?
Here is my Blade syntax for selecting cc :
<div class="form-group">
<label>CC <span class="astirered">*</span></label>
{!! Form::select('cc[]', $employee_list, $mail_cc_user_id, ['class'=>'form-control select2','multiple']) !!}
<span class="astirered">{!! $errors->first('cc') !!}</span>
</div>
and this is the script of select 2 :
$('.select2').select2({
placeholder: "Please select one"
});
I dont think select 2 has a built in way for that, but with some additional JQuery it is possible to hide it. If you look the select box with inspector you will find something like this
<li class="select2-selection__choice" title="mni#email.com" data-select2-id="id">
<span class="select2-selection__choice__remove" role="presentation">×</span>
mni#email.com
</li>
You could remove that x by jQuery like this:
$('li.select2-selection__choice[title="mni#email.com"]').find('span.select2-selection__choice__remove').remove();
And then for exmaple you could mark that specific email default selected in the form, then run that jQuery command when document loads.

Getting the selected string in the dropdown list in Angular

To begin with, I am an absolute beginner in front-end development, thus please excuse me if the question is too elementary.
The project I am working on, a drop-down list has been defined as:
<div ng-controller="FacetController">
<div class="spnlocationdrop-container" ng-hide="isservicelocal">
<select class="spnlocationdrop" ng-model="$parent.locationsearch" ng-options="location for location in locations | sortArray ">
<option value="">All Cities</option>
</select>
</div>
</div>
The list contains cities, out-of which the user has to select one. The value has to be stored, and sent to the backend via an AJAX call.
How do I get the selected value? Until now, I've been doing that using the document.getElementByID().value() function, but since the above list contains no ID, how do I get the value?
ng-model will have the value of the option selected.
Here's a simple working example: Plunker
In my example, data.singleSelect has the value you need so I'm able to output that to the view using {{ data.singleSelect }} though if I wanted to access it in my controller I would do var input = $scope.data.singleSelect and then pass that input variable to the backend via an AJAX call.

AngularJS - ng-repeat not updating to correct results using filters

I have an ng-repeat like so:
<div class="event block block--fullwidth nga-default nga-stagger nga-fade" data-ng-repeat="event in (filteredEvent = (Events.events | filter:Events.query | myDateRange:Events.dateFrom:Events.dateTo:Events.specificDate | orderBy:Events.orderEvent)) | limitTo:Events.limit"></div>
And I also have a few search filter boxes at the top of the page(inputs/select boxes) that the user can use to filter their search results. An example of one is the search box(as below:
<input id="txt1" class="input--fullwidth" type="text" data-ng-model="Events.query.TotalLocation" placeholder="Enter a region, place or postcode" data-ng-change="Events.limit = 6" />
It kind of works, in the sense that the results update as you start typing in to the search box. However, when you press backspace so the search box is empty, it doesn't go back to the original search length(it could be 992 on first load but end up on 940 when you backspace). It seems to do this with many of my search filters.
I just can't work it out, and thanks for any help.
For some reason the solution was really weird. By adjusting my ng-repeat to include a data attr that had the ng-repeat variable in seemed to make it work. E.g.
<div class="event block block--fullwidth nga-default nga-stagger nga-fade" data-ng-repeat="event in (filteredEvent = (Events.events | filter:Events.query | myDateRange:Events.dateFrom:Events.dateTo:Events.specificDate | orderBy:Events.orderEvent)) | limitTo:Events.limit" data-var="{{filteredEvent.length}}"></div>

Cascading Dropdowns using AngularJS

A merchant has multiple branches.
When selecting a merchant I'm trying to make another dropdown list the data from merchant.branches.
Doing the below does not seem to be resolving the problem:
<label>Merchant:</label>
<select ng-if="merchants" ng-model="merchant" ng-options="merchant.name for merchant in merchants track by merchant.id"></select>
<span ng-if="!merchants">Listing merchants, please wait...</span>
<br />
<label>Branch:</label>
<select ng-if="merchant.branches" ng-model="device.branch" ng-options="branch.name for branch in merchant.branches track by branch.id"></select>
<span ng-if="!merchant.branches">Listing branches, please wait...</span>
<pre>
{{ merchant.branches }}
</pre>
Please note that the data is correct and Merchants return properly with their respective branches.
SOLVED
Using a different method (By calling ng-change on the first dropdown and then populating the second dropdown). However, is it possible to achieve this without writing any controller code?
I have to guess at how your controller works, but you might have luck with this:
<label>Branch:</label>
<select ng-if="merchant.branches"
ng-model="device.branch"
ng-options="branch.name for branch in merchants[merchant.id].branches track by branch.id"></select>

AngularJS ng-repeat filter function not filtering properly

I have ui-select2 dropdown that depends on the selection of a parent. I have a array of options for the first ui-select2, then when something is selected from that dropdown, the next dropdown will appear. The available options for the 2nd dropdown will depend on what is selected in the first dropdown. The ng-repeat directive is iterating over an array of choices. Here is the html and the js code.
HTML:
<select name="application" placeholder="Select a Tenant"
ng-disabled="!sharedObj.tenantApplications ||
sharedObj.tenantApplications.length == null"
class="form-control" id="application"
ng-change="vmOrderItem.vmNameUSI=null" ui-select2
ng-model="vmOrderItem.tenantApplication" title="Select tenant application"
data-style="btn-default" required><option></option>
<option ng-repeat="tenantApplication in sharedObj.tenantApplications |
filter:tenantFilter()" value="{{tenantApplication.id}}">{{tenantApplication.name}}
</option>
</select>
JS:
/** Filters the tenant depending on what domain is selected */
$scope.tenantFilter = function(tenantApplication) {
$scope.sharedObj.tenantApplications;
tenantApplication.name;
tenantApplication.id;
return true;
/* return $scope.vmOrderItem.domain.id == tenantApplication.domainId;*/
}
The issue I get is that even if I return true, nothing ever shows up on the dropdown. I did this to test the logic. I don't know why the tenantApplication parameter is always undefined in the function. I used google chrome inspect element to insert a breakpoint and it complains that the argument is undefined. But I don't see why it wouldn't work properly when I return true. I'm a newbie to JavaScript and AngularJS so any help is greatly appreciated. I've worked through all the AngularJS examples and read their docs but I'm still just a beginner.
Think this should be:
<option ng-repeat="tenantApplication in sharedObj.tenantApplications |
filter:tenantFilter" value="{{tenantApplication.id}}">

Categories

Resources