We Keep Coding

Show / Hide Elements within the same parent div

I'm having trouble getting a div ('.option-other') within a parent group ('.other-row') to show/hide when the corresponding option of the select element ('.select-toggle') is selected. Right now if "other" is selected from either question set 1 or 2 it will show both of the '.option-other' divs. I tried using .parent() and .closest() as described in this solution, but can't seem to figure out the proper way to utilize it for this use case.
$(".select-toggle").change(function() {
var oth = false;
$(".select-toggle option:selected").each(function() {
if ($(this).val() == "other") oth = true;
});
if (oth) $('.option-other').show();
else $('.option-other').hide();
// tried this method as well but still doesnt work
// if (oth) $(this).closest('.other-row').children('.option-other').show();
// else $(this).closest('.other-row').children('.option-other').hide();
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Question set 1 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you eat?</label>
<select class="select-toggle" multiple>
<option>Pizza</option>
<option>Cake</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like" />
</div>
</div>
</div>
<!-- Question set 2 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you drink?</label>
<select class="select-toggle" multiple>
<option>Water</option>
<option>Soda</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like" />
</div>
</div>
</div>

// you wrote:
// tried this method as well but still doesnt work
// if (oth) $(this).closest('.other-row').children('.option-other').show();
// else $(this).closest('.other-row').children('.option-other').hide();
You're close, but $.children only selects direct children of each .other-row. Since .option-other is inside .col inside .other-row, $.children can't see it. Use $.find instead.
// your original code:
var oth = false;
$(".select-toggle option:selected").each(function() {
if ($(this).val() == "other") oth = true;
});
This sets one visibility value for the entire page: if at least one "other" option is selected, anywhere, show all the text inputs. The change event is fired for the <select> that actually changed, so focus your efforts there:
var oth = false;
$(this).children("option:selected").each(function() {
if ($(this).val() == "other") oth = true;
});
if (oth) $(this).closest('.other-row').find('.option-other').show();
else $(this).closest('.other-row').find('.option-other').hide();
This works, but it could be cleaner. Showing or hiding an element based on a boolean is a common enough requirement that jQuery has a function for it: $.toggle. You can replace the if/else lines with
$(this).closest('.other-row').find('.option-other').toggle(oth);
Your $.each loop does one thing: set oth if there exists at least one selected <option> with a value of "other". You can get the same logic as a one-liner by using an attribute selector:
var oth = ($(this).find('option:checked[value="other"]').length !== 0);
(I changed :selected to :checked because you're already filtering on option elements, and :selected has a performance penalty.)
The final version:
$(".select-toggle").change(function() {
var oth = ($(this).find('option:checked[value="other"]').length !== 0);
$(this).closest('.other-row').find('.option-other').toggle(oth);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Question set 1 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you eat?</label>
<select class="select-toggle" multiple>
<option>Pizza</option>
<option>Cake</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like" />
</div>
</div>
</div>
<!-- Question set 2 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you drink?</label>
<select class="select-toggle" multiple>
<option>Water</option>
<option>Soda</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like" />
</div>
</div>
</div>
Vanilla JS version:
document.querySelectorAll('.select-toggle').forEach(el => {
el.addEventListener('change', evt => {
const oth = evt.target.querySelector('option:checked[value="other"]');
evt.target
.closest('.other-row')
.querySelector('.option-other')
.style.display = (oth ? '' : 'none');
});
// trigger change event programmatically
const event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);
});

Here is a solution that is a little clunky but I did it relatively quick. It's kind of a work around for having to know which of your two selectors with the same class had been selected.
Here is a working example using your code.
$(".select-toggle").change(function () {
var oth = false;
$(".select-toggle option:selected").each(function () {
if ($(this).val() == "otherFood") {
oth = true;
$('.option-other-food').show();
} else {
$('.option-other-food').hide();
};
if ($(this).val() == "otherDrink") {
oth = true;
$('.option-other-drink').show();
} else {
$('.option-other-drink').hide();
};
});
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Question set 1 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you eat?</label>
<select class="select-toggle" multiple>
<option>Pizza</option>
<option>Cake</option>
<option value="otherFood">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other-food">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like"/>
</div>
</div>
</div>
<!-- Question set 2 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you drink?</label>
<select class="select-toggle" multiple>
<option>Water</option>
<option>Soda</option>
<option value="otherDrink">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other-drink">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like"/>
</div>
</div>
</div>
Cheers!

Angularjs ng-if with required field validation

Hi I am developing one web application in angularjs. I have one checkbox and very next i have one dropdown. If i check checkbox then i want to make dropdown required. Wheneer i do following,
I click on checkbox-dropdown required validation will occur.
Whenever i uncheck on checkbox still my required validation will occur. I want to make required validation for dropdown only when checkbox is checked.
Below is my checkbox.
<div class="inputblock">
<label class="inputblock-label">{{ 'Military' | translate }}</label>
<label class="military">{{ 'Military' | translate }}</label>
<input type="checkbox" name="Military" placeholder="{{ 'Military' | translate }}" ng-model="Military" ng-change="statechanged(Military)">
</div>
Below is my dropdown.
<div class="inputblock" ng-class="{ 'has-error' : ((form3.$submitted && form3.rank.$invalid) || (form3.rank.$invalid && form3.rank.$dirty))}">
<label class="inputblock-label">{{ 'Rank' | translate }}</label>
<div ng-if="rankrequired==true">
<span class="ang-error" style="color:#fff" ng-show="form3.rank.$invalid && form3.rank.$error.required && form3.rank.$dirty">*{{'Required' | translate}}</span>
</div>
<select id="rank" name="rank" ng-model="user.rank" ng-options="user.ID as user.Rank for user in rankList" required>
<option value="" label="rank">{{ 'Rank' | translate }}</option>
</select>
</div>
Below is my javascript code.
$scope.statechanged = function (Military) {
if (Military == true)
{
enablerankdropdown();
$scope.rankrequired = function () {
return true;
};
}
else
{
$scope.user.rank = $scope.rankList[0].value;
disablerankdropdown();
$scope.rankrequired = function () {
return false;
};
}
}
Whenever i uncheck the checkbox i dont want to have required field validator. Now i am getting required field validator after unchecking also. May i know why this is happening here? May i get some help in order to fix the above issue? Any help would be appreciated. Thank you.

You can use ng-required to achieve this. Assign the ng-model of your checkbox to ng-required of select.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<input type="checkbox" name="user" ng-model="user">
<select name="service_id" class="Sitedropdown" style="width: 220px;"
ng-model="ServiceID"
ng-options="service.ServiceID as service.ServiceName for service in services"
required ng-required="user">
<option value="">Select Service</option>
</select>
<span style="color:red" ng-show="myForm.service_id.$error.required">Select service</span>
<input type="submit"
ng-disabled="
myForm.service_id.$dirty && myForm.service_id.$invalid">
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.services = [
{ServiceID: 1, ServiceName: 'Service1'},
{ServiceID: 2, ServiceName: 'Service2'},
{ServiceID: 3, ServiceName: 'Service3'}
];
});
</script>
</body>
</html>

You can use ng-required="Military".
<div class="inputblock" ng-class="{ 'has-error' : ((form3.$submitted && form3.rank.$invalid) || (form3.rank.$invalid && form3.rank.$dirty))}">
<label class="inputblock-label">{{ 'Rank' | translate }}</label>
<div ng-if="rankrequired==true">
<span class="ang-error" style="color:#fff" ng-show="form3.rank.$invalid && form3.rank.$error.required && form3.rank.$dirty">*{{'Required' | translate}}</span>
</div>
<select id="rank" name="rank" ng-model="user.rank" ng-options="user.ID as user.Rank for user in rankList" ng-required="Military">
<option value="" label="rank">{{ 'Rank' | translate }}</option>
</select>
</div>

Show div tag when selecting an option | Angular1

I want to show a div tag when selecting a specific option. I am developing this with Angular and Ionic 1. I've been searching around for a while now, but I can't find any answers that works for me, therefore I'm writing this. I want to display the second option (id number 2), but I can't get it to work.
Here's the HTML:
<div class="row row-white">
<div class="col col-white">
<label>
<select name="keys" ng-options="key.name for key in list" ng-change="myCtrl()" ng-model="testValue" class="select-input" style="margin-left:0px;">
<option ng-if="false"></option>
<option ng-value=""></option>
<option ng-value=""></option>
</select>
</label>
</div>
</div>
<div class="divider20"></div>
<div class="row row-white" ng-show="result"> <!-- Won't display!! -->
<div class="col col-white">
<input type="number">
</div>
</div>
And here's the JS:
$scope.list = [{
"id": 1,
"name": "Engångsnyckel"
}, {
"id": 2,
"name": "Fleragångsnyckel"
}]
$scope.myCtrl = function() {
if ($scope.testValue.id == "2") {
$scope.result = true
}
else {
$scope.result = false
}
}
// Sets the first index as placeholder
$scope.testValue = $scope.list[0]
Sorry if this is a dumb and obvious question, but I'm getting desperate.

I hope this will help. You can directly use the data binding property without depending on any functions for the static conditions.
function TodoCtrl($scope) {
$scope.list = [{
"id": 1,
"name": "The Id One"
}, {
"id": 2,
"name": "The Id Two"
}]
// Sets the first index as placeholder
$scope.testValue = $scope.list[0]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<div class="row row-white">
<div class="col col-white">
<label>
<select name="keys" ng-options="key.name for key in list" ng-model="testValue" class="select-input" style="margin-left:0px;">
<option ng-if="false"></option>
<option ng-value=""></option>
<option ng-value=""></option>
</select>
</label>
</div>
</div>
<div class="divider20"></div>
<div class="row row-white" ng-show="testValue.id==2"> <!-- Won't display!! -->
<div class="col col-white">
<input type="number" placeholder="Enter the number here">
</div>
</div>
</div>
</div>

Your comparison should be with a number
$scope.myCtrl = function() {
if ($scope.testValue.id == 2) {
$scope.result = true
}
else {
$scope.result = false
}
}
It's nice to use track by too in your
<select name="keys" ng-options="key as key.name for key in list track by key.id" ng-change="myCtrl()" ng-model="testValue" class="select-input" style="margin-left:0px;">
</select>

How to Pass id and name from the first form, and Show only the name in second form in angularjs

I Have two forms.In these forms am getting input from the first form and show that in the second form, Which means if the user selected the currency from the dropdown, i need to pass id and the the currency name. But show only the currency name in the second form. I tried one method (dont know whether it is correct or not) it is showing the id only. am new to angular. is there anyway to solve this?
HTML
<div class="row text-center" ng-show="firstform">
<form name="validation">
<label>Currency</label>
<select ng-model="CurrencyId" ng-selected="CurrencyId" class="form-control" id="CurrencyId">
<option ng:repeat="CurrencyId in currencyList" ng-selected="selectedCurrencyType == CurrencyId.id" value={{CurrencyId.currencyId}}>{{CurrencyId.name}}</option>
</select>
<label>Grade</label>
<select ng-model="GradeId" ng-selected="GradeId" class="form-control" id="GradeId">
<option ng:repeat="GradeId in RaceGradeList" ng-selected="selectedGrade == GradeId.id" value={{GradeId.id}}>{{GradeId.gradeName}}</option>
</select>
<button type="submit"value="add" ng-click="savedetails()" />
</form>
</div>
<div class="row text-center" ng-show="secondform">
<form name="thirdform">
<ul >
<li><p>Currency:{{CurrencyId}}</p> </li>
<li><p>Grade:{{GradeId}}</p> </li>
</ul>
</form>
</div>
angular controller
$scope.savedetails = function () {
$scope.firstform= false;
$scope.secondform = true;
}

This is the most simplest solution that you can go for. Instead of having the value={{CurrencyId.currencyId}} set it as value={{CurrencyId.name}} for the options in the dropdown and you are good to go. Below is the demo for the same. But if you want to save currencyId as the value then you will have to iterate over the array and find the name based on the selected currencyId and then show that in the view.
UPDATE
Updated the code to have the currencyId being stored as the selected value and then based on that showing the name in the view.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.currencyList = [{
currencyId: 1,
name: "INR"
},
{
currencyId: 2,
name: "$"
},
{
currencyId: 3,
name: "#"
}
];
$scope.currencyChanged = function() {
var selectedCurrency;
for (var i = 0; i < $scope.currencyList.length; i++) {
var thisCurr = $scope.currencyList[i];
if ($scope.CurrencyId == thisCurr.currencyId)
selectedCurrency = thisCurr.name;
}
return selectedCurrency;
}
$scope.firstform = true;
$scope.savedetails = function() {
$scope.firstform = false;
$scope.secondform = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="row text-center" ng-show="firstform">
<form name="validation">
<label>Currency</label>
<select ng-model="CurrencyId" ng-selected="CurrencyId" class="form-control" id="CurrencyId">
<option ng:repeat="CurrencyId in currencyList" ng-selected="CurrencyId == CurrencyId.currencyId" value={{CurrencyId.currencyId}}>{{CurrencyId.name}}</option>
</select>
<button type="button" value="add" ng-click="savedetails()">Save Details</button>
</form>
</div>
<div class="row text-center" ng-show="secondform">
<form name="thirdform">
<ul>
<li>
<p>Currency:{{currencyChanged()}}</p>
</li>
</ul>
</form>
</div>
</body>
Hope it helps :)

You can use ng-options , its very flexiable where we can display one value and select either entire object or any specific property.
Please check below plunker , hope it meets your requirement
https://plnkr.co/edit/JQjmAwk62R8rfAlTZ696?p=preview
<select ng-model="CurrencyId" ng-options="currency.id for currency in currencyList" class="form-control" id="CurrencyId" >
</select>
For more details on ng-options , go through below video
https://www.youtube.com/watch?v=vqx3zCy4d3I

try
<li><p>Currency:{{CurrencyId.name}</p> </li>

AngularJS Bind data to select drop down when the value of another select drop down is changed

I have tried using data-ng-change="GrowerCtrl()"
but my controller is not getting called?
Any help is greatly appreciated!
Edit
I've added the code both html and javascript...I'm using Angular/Restangular and Select2
HTML
<html ng-app="MainPage">
<head>
***JS includes
</head>
<div ng-controller="AgenciesCtrl">
<div id="divAgency" class="MenuItemDiv">
<label id="lblAgencyName" class="HeaderLabel">Select agency...</label>
<select id="AgencyName" ng-model="SelectedAgency" ui-select2 chosen style="width:250px" ng-options="Agency.AgencyName for Agency in Agencies.AgencyList" data-ng-change="GrowerCtrl()">
#*<option ng-repeat="Agency in Agencies.AgencyList" >{{Agency.AgencyName}}</option>*#
</select>
</div>
</div>
<div ng-controller="GrowerCtrl">
<div id="divGrowers" class="MenuItemDiv">
<label id="lblGrowers" class="HeaderLabel">Select grower...</label>
<select id="Growers" ui-select2 chosen style="width:250px; padding:3px 3px 3px 3px; " ng-options="Grower.GrowerName for Grower in Growers.GrowerList |filter:SelectedAgency">
#*<option ng-repeat="Grower in Growers.GrowerList | filter:{SelectedAgency.AgencyID}" >{{Grower.GrowerName}}</option>*#
</select>
</div>
</div>
</div>
**file/dialogControl.js
var FarmMapsApp = angular.module('MainPage', ['restangular']);
FarmMapsApp.directive('chosen', function () {
$("#AgencyName").select2();
$("#Growers").select2();
})
function AgenciesCtrl($scope, Restangular) {
Restangular.setBaseUrl('http://localhost/MappingServicesWebAPI/api');
Restangular.all('Agency');
$scope.Agencies = Restangular.all('Agency').getList();
};
**file/GrowerList.js
function GrowerCtrl($scope, Restangular) {
Restangular.setBaseUrl('http://localhost/MappingServicesWebAPI/api');
Restangular.all('Grower');
$scope.Growers = Restangular.all('Grower').getList($('#AgencyName').val());
};

I ended up dropping the "data-" portion off "data-ng-change" and putting everything inside the same controller and added the Select 2 angular plug-in https://github.com/angular-ui/ui-select2 . This plug-in does not work with ng-Options so I implemented ng-repeat instead and now it's working fine...
NEW HTML
<div ng-controller="WhoCtrl">
<div id="divAgency" class="MenuItemDiv">
<label id="lblAgencyName" class="HeaderLabel">Select agency...</label>
<select id="AgencyName" ui-select2 ng-model="SelectedAgency" style="width:250px" ng-change="GetGrowers()">
<option>"Select an agency..."</option>
<option ng-repeat="Agency in Agencies.AgencyList" value="{{Agency.AgencyID}}">{{Agency.AgencyName}}</option>
</select>
</div>
<div id="divGrowers" class="MenuItemDiv">
<label id="lblGrowers" class="HeaderLabel">Select grower...</label>
<select id="GrowerName" ui-select2 ng-model="SelectedGrower" style="width:250px; padding:3px 3px 3px 3px;" ng-change="LoadMap()" >
<option value="0">"Select a grower..."</option>
<option ng-repeat="Grower in Growers.GrowerList" value="{{Grower.GrowerID}}">{{Grower.GrowerName}}</option>
</select>
</div>
</div>
NEW Controller
var App = angular.module('MainPage', ['restangular','ui.select2']);
function WhoCtrl($scope, Restangular) {
Restangular.setBaseUrl('http://localhost/MappingServicesWebAPI/api');
Restangular.all('Agency');
$scope.Agencies = Restangular.all('Agency').getList();
$scope.GetGrowers = function () {
Restangular.all('Grower');
$scope.Growers = Restangular.all('Grower').getList({ AgencyID: $("#AgencyName").val() });
};
$scope.LoadMap = function () {
if ($("#GrowerName").val() != 0) {
LoadMap();
SlidePanelExpandCollapse("Collapse");
}
};
}