I have this basic example of trying to use ng-show. I effectively only want to show a portion of the page if 'GB' is selected from the country drop down box. I have validated that the ctrl recieves 'GB' in it when i select GB from the dropdown box. However, the elements are not hidden on the page initially and selecting things from the select box has no impact. I'd appreciate any help.
<ng-form name="directorsForm" cc-pitch-form="5" ng-controller="work.myCtrl as ctrl">
<div class="row cc-form__group">
<div class="columns large-3">
<label>Country</label>
</div>
<div class="columns large-3 left">
<select ng-options="country.code as country.name for country in ctrl.countryList" ng-model="ctrl.selectedCountry" />
</div>
</div>
<div ng-show="ctrl.selectedCountry =='GB'">
<div class="columns large-3">
<label>Enter address</label>
</div>
</div>
</ng-form>
replace this line
<select ng-options="country.code as country.name for country in ctrl.countryList" ng-model="ctrl.selectedCountry" />
like this
<select ng-options="country.code as country.name for country in ctrl.countryList" ng-model="ctrl.selectedCountry" ></select>
self closing in select is not working in angular i hope it helps!!
Related
i have html content like below,
<div role="row" data-testid="table-row-0">
<div role="cell">
<input data-testid="table-row-checkbox" type="checkbox" checked> //uncheck this checkbox
<label></label>
</div>
<div role="cell">name1</div> //find by this name1
<div role="cell">type1</div>
</div>
<div role="row" data-testid="table-row-1">
<div role="cell">
<input data-testid="table-row-checkbox" type="checkbox" checked>
<label></label>
</div>
<div role="cell">name2</div>
<div role="cell">type2</div>
</div>
as seen from above, i want to uncheck the checkbox for the div with name1. how can i do it using cypress.
Use the uncheck method:
cy.contains('name1').parent().find('input').uncheck()
Alternative way to get the correct input.
cy.contains('[data-testid^=table-row-]','name1')
.find('[data-testid=table-row-checkbox]')
.uncheck()
Here is working example.
Thank you.
In my form there are some dynamic input text boxes created by using ng-repeat. How to get the values of these text boxes when submit the form using Angular js?
<form ng-submit="submit()">
<div ng-repeat="opt in option">
<input type="text" name="">
</div>
</form>
Not sure of what you want but guess this will help you
<div ng-app="myApp" ng-controller="myController">
<input type="text" ng-model="data[$index].Name" ng-repeat="num in numbers track by $index"/>
<p ng-repeat="dataObj in data track by $index">
{{dataObj.Name}}
</p>
</div>
I have created a fiddle here
Use ng-model to bind the input values and $index for that particular index in the repeated values.
$scope.inputData = [];
inputData will have the binded values.
<form ng-submit="submit()">
<div ng-repeat="opt in option">
<input type="text" name="" ng-model="inputData[$index]">
</div>
</form>
in the following code I have one drop-down list (serviceSmallId) for type of service.
It is populated using model info.
There is a second field check-box which should only be visible when drop-down has a selected value of 'Weekly'. I am trying to use ng-show/ hide of angular.
I tried to search for possible solutions but no luck.
Can anyone please guide me what I am doing wrong.
<section id="scrubber-view" class="mainbar" data-ng-controller="scrubber as vm">
<section class="matter">
<div class="container">
<div>
<button class="btn btn-info" ng-click="vm.goBack()"><i class="fa fa-arrow-left"></i>Back</button>
<button class="btn btn-info" ng-click="vm.cancel()" ng-disabled="!vm.canSave"><i class="fa fa-undo"></i>Cancel</button>
<button class="btn btn-info" ng-click="vm.save()" ng-disabled="!vm.canSave"><i class="fa fa-save"></i>Save</button>
<span ng-show="vm.hasChanges" style="color:orange" class="dissolve-animation ng-hide"><i class="fa fa-asterisk"></i></span>
</div>
<div class="row">
<div class="widget wblue">
<div data-cc-widget-header title="{{vm.title}}" subtitle="{{vm.scrubber.scrubberId}}"></div>
<form class="form-horizontal">
<div class="form-group">
<label for="serviceSmallId" class="col-sm-2">Service</label>
<div class="col-sm-4">
<select class="form-control" id="serviceSmallId" ng-model="vm.scrubber.serviceSmallId"
ng-options="item.dataLookupId as item.description for item in vm.serviceSmalls | orderBy:['sortOrder','description']">
</select>
</div>
</div>
<div class="form-group" ng-show="vm.scrubber.serviceSmallId.value=='Weekly'">
<input class="form-control" type="checkbox" id="fullyFlanged" value="Bar" />
</div>
</form>
</div>
</div>
</div>
</section>
</section>
There probably is a more elegant "angular way" solution,
but I updated you code to work here - http://jsbin.com/tupisoriho/1/edit?html,js,output
Explanation of changes
Provided ng-show a value vm.checker
added ng-change to the select element and gave it a function checkerGo which tested to see if dropdown == 'weekly', if yes change vm.checker
Update
there is a more "angular way" - using expressions!
As per #Omri Aharon fiddle/comment below.
You don't need to get the value property because a ng-model don't hold the element but the value itself;
<div class="form-group" ng-show="vm.scrubber.serviceSmallId.value=='Weekly'">
must be
<div class="form-group" ng-show="vm.scrubber.serviceSmallId == 'Weekly'">
EDIT: In your case vm.scrubber.serviceSmallId will contain the ID and not the description Weekly. I suggest you to use ng-change directive to call a function in your controller that will find the item based on ID and set in the controller to be visible for ng-show.
<select class="form-control" id="serviceSmallId" ng-model="vm.scrubber.serviceSmallId"
ng-options="item.dataLookupId as item.description for item in vm.serviceSmalls | orderBy:['sortOrder','description']"
ng-change="vm.selectObj()">
vm.selectObj() will find and set the current selected object in the scope to an controller variable (ex.: vm.selectedItem) and:
<div class="form-group" ng-show="vm.selectedItem.description=='Weekly'">
<form name="companyProfileForm" autocomplete="false" novalidate ng-submit="OnSaveCompanyProfile(companyProfileForm.$valid)" ng-controller="companyProfileDataEntryController">
<section ng-hide="!IsCompanyKnown();" class="row">
<div class="small-12 medium-6 large-6 columns">
<!--Industry-->
<section class="row">
<div class="small-12 medium-12 large-12 columns" ng-class="{ 'has-error' : (companyProfileForm.Industry.$invalid && submitted) }">
<div class="form-group">
<label for="Industry">*Industry</label>
<select name="Industry"
ng-model="CompanyProfileModel.IndustryId"
ng-options="item.Id as item.Description for item in IndustryList"
required>
<option value=null>-- select an industry --</option>
</select>
<span class="help-block" ng-show="companyProfileForm.Industry.$invalid && submitted">Please select a value.</span>
</div>
</div>
</section>
</div>
</section>
<button></button>
</form>
No matter what I do this form will evaluate to true. I want it to throw an error that Industry is required. Upon submit it goes to a function that prints to the console the parameter. It prints true every time.
You need to use the AngularJS ng-required directive, not required. Change the select element required to ng-required="true":
<select name="Industry" ng-model="CompanyProfileModel.IndustryId" ng-options="item.Id as item.Description for item in IndustryList" ng-required="true">
<option value=null>-- select an industry --</option>
</select>
Using 'required' on a form element will work in angular so long as your form element has an ng-submit="action()" and a button EXACTLY as follows inside the form:
<button type='submit' ng-click='submit()'>SomeText</button>
I have written following code in .js file
var appMod = angular.module('appMod',[]);
appMod.controller('domainCtrl', function($scope) {
$scope.admins = [{"type":["Kerberos","Department","Office"],"office":["NA","Bangalore","NY","NJ"]}];
});
Now i want to select an option from a drop down of type and office.
I have written following code in .html
<label for="typeOfAccess" class="col-sm-2 control-label">Type of Access :</label>
<div class="col-sm-1">
<select name="typeOfAccess" data-ng-model="newDomain.typeOfAccess">
<option data-ng-repeat="typeOfAccess in admin.type" value="typeOfAccess">{{typeOfAccess}}</option>
</select>
</div>
Please suggest what to do.
That is not how you defined options for a select in angularjs.
Please check documentation angularjs docs
This is how it should look like:
<label for="typeOfAccess" class="col-sm-2 control-label">Type of Access :</label>
<div class="col-sm-1">
<select name="typeOfAccess"
data-ng-model="newDomain.typeOfAccess"
data-ng-options="typeOfAccess for typeOfAccess in admin.type">
</select>
</div>
Let me know if it works after making those changes.
Try to use ng-value to save selected option .
I had same problem here once: Display details of selected options in Angularjs
$scope.selection = {
typeOfAccess: null
};
<label for="typeOfAccess" class="col-sm-2 control-label">Type of Access :</label>
<div class="col-sm-1">
<select name="typeOfAccess" data-ng-model="newDomain.typeOfAccess">
<div data-ng-repeat="typeOfAccess in admin.type">
<label><option value="typeOfAccess" ng-value="typeOfAccess" ng-model="selection.typeOfAccess"> </label> </option>
</div>
</select>
</div>
Selected campaign: {{ selection.typeOfAccess }}