I'm using angularjs and I'm trying to use bootstrap-select.
But when I enter in the url that is using the bootstrap-select doesn't appear. Just when I refresh the page.
<div class="col-sm-3 label-center">
<div class="form-group" ng-class="{'has-error': form.mapping.$invalid && submitted}">
<label>{{'Mapping' | translate}}</label>
<select class="form-control selectpicker" name="mapping" ng-model="workflowList[0]">
<option>Nothing Selected</option>
<option ng-repeat="w in workflows[0]" ng-value="w.resource_uri">{{w.name}}</option>
</select>
</div>
</div>
Related
Does anyone know why angular does not update the file in the browser? I try to use the incognito also same. the file recently I update not reflect on the browser. ng-repeat.
the HTML:
<body ng-app="cgpaCalculator">
<div class="card" ng-controller="cgpaCtrl">
[...]
<div class="row" ng-repeat="number in data.rows track by $index">
<div class="col-lg-5 mb-2">
<div class="form-label-group">
<input type="text" name="course_name" id="course_name" class="form-control" placeholder="Course Name [Optional]">
<label for="course_name">Course Name [Optional]</label>
</div>
</div>
<div class="col-lg-3 mb-2">
<div class="form-label-group">
<select class="form-control custom-select" ng-model="data.rows[$index].grade" ng-options="grade for grade in grades track by grade">
<option value="" disabled selected>Select Grade</option>
</select>
</div>
</div>
</div>
The Controller:
I don't know what i'm doing wrong.
Here using JQuery Select 2 Autocomplete Dropdown with multiple selection.
When it is use by single it is working fine,like this
But When it is use by more than one Auto complete Not Working ,like this
<div class="col-lg-6" ng-repeat="locationtype in allLocationTypes">
<b><label ng-bind="locationtype.Type"></label></b>
<div class="form-group">
<select id="LocationMapID" multiple="multiple" class="form-control" placeholder="Select Location" style="width:100%">
<option value="" disabled="disabled">--Select Location--</option>
<option ng-repeat="location in allLocations | filter :filterLocations(locationtype.ID) " value="{{location.ChildLocationID}}">{{location.ParentLocation + '-' + location.ChildLocation}}</option>
</select>
</div>
</div>
I have faced this issue before
to resolve this I have set Uniq Id for each select2 box
<div class="col-lg-6" ng-repeat="locationtype in allLocationTypes">
<b><label ng-bind="locationtype.Type"></label></b>
<div class="form-group">
<select id="LocationMapID_{{locationtype.Type}}" multiple="multiple" class="form-control" placeholder="Select Location" style="width:100%">
<option value="" disabled="disabled">--Select Location--</option>
<option ng-repeat="location in allLocations | filter :filterLocations(locationtype.ID) " value="{{location.ChildLocationID}}">{{location.ParentLocation + '-' + location.ChildLocation}}</option>
</select>
</div>
</div>
I have a select box in that few values which is based on the selection i need to show the labels of the textbox.
ex: if you selected
the SE means I need to show the Location2 and Reporting To label box.
If you are selecting MANAger means need to show only Location2 label text
box only. And if you are selecting ADM/cluster, any one from this means need to be display only Location alone.
Js file
$scope.ChangeRole = function(id){
roleid=$scope.Role;
if(id=="2"){
// alert(id);
$scope.showreport =true;
$scope.showreportlocation=true;
$scope.showlocation = false;
}else if(id=="3"){
$scope.showreportlocation = true;
$scope.showreport = false;
$scope.showlocation = false;
}else{
$scope.showreport = false;
$scope.showreportlocation = false;
$scope.showlocation = true;
}
}
HTML file
<div class="col-lg-6">
<div class="form-group">
<label>Role<span style="color:red">*</span></label>
<div class="input-group role">
<select placeholder="Role" ng-model="Role" class="form-control pull-right" ng-change="ChangeRole(Role);" required ng-init="selectedType()" id="selectType"" name="role" required>
<option value="0">Role</option>
<option value="1">ADM</option>
<option value="2">SE</option>
<option value="3">MANA</option>
<option value="4">ClUSTER</option>
</select>
<div class="input-group-addon">
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group" ng-show="showlocation">
<label>Location<span style="color:red">*</span></label>
<div class="input-group location">
<select id="LocationInput" class="form-control" ng-model="LocationId" ng-options="location.Id as location.NameoftheLocation for location in locations" required>
<option id="OptionInput" value="">Location</option>
</select>
<div class="input-group-addon">
</div>
</div>
</div>
</div>
<div class="col-md-6" ng-show="showreportlocation">
<div class="form-group">
<label>Location2<span style="color:red">*</span></label>
<div class="input-group site">
<select data-placeholder="Location" style="width: 100%;" ui-select2="select2Options" class="form-group" multiple ng-model="selectedTags" required>
<option ng-repeat="tag in tags" value="{{tag.Id}}">{{tag.NameoftheLocation}}</option>
</select>
<div class="input-group-addon">
<i class="fa fa-map"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-6" id="otherType" ng-show="showreport">
<div class="form-group">
<label>Reporting To<span style="color:red">*</span></label>
<div class="input-group">
<select class="form-control" id="reportingto" name="reportingto" ng-options="n.Id as n.Name for n in names" ng-model="ReportingTo" required>
<option value="">Reporting To</option>
</select>
<div class="input-group-addon">
</div>
</div>
</div>
</div>
Here I have given the required option for all but which is not allowing me to save because required is present.
Using ng-show for particular selection I hide that label, but while saving html will check that field also, which is wrong please let me know that how to do.
Please some make the fiddle and let me know,
Use ng-required instead and only require it when it is shown.
I also tested Casey's suggestion of using ng-if instead of ng-show and that works as well. https://plnkr.co/edit/eeKvz5zRFeuLSF6fDbuy?p=preview
I'm getting a JSON value from one WebService like this
"electricity":
{ "selectedElectricityBoard":"ABCD",
"electrictyConsumerNumber":"12345",
"isElectricityBoardChecked":true
}
I generated a Drop Down list from the JSON data,after that i select the value and submit the value, the value gets submitted successfully from my UI, now the case is I'm editing the same form for which i'm making a Web Service call which returns me the same value, which i have selected from the UI, but the selected value is not being populated/reflected in the drop-down menu, any suggestion or help would be highly appreciable, My UI is in Angular JS, the code snippet is as follows :
<div class="col-xs-2 no-padding ">
<label>Consumer No.:</label>
</div>
<div class="col-xs-3">
<span ng-hide="true" class="form-control" ng-required="true"
close-text="Close">
</span>
<div class="group-3-text-boxes col-xs-3 no-padding" style="min-width: 100px;">
<input type="text" name="consumer_number"
ng-disabled="!form_data[selectedTab].electricity.isElectricityBoardChecked"
ng-model="form_data[selectedTab].electricity.electrictyConsumerNumber"
class="input-field"
ng-class="{true:'invalid-field',false:''}
form_data[selectedTab].electricity.isElectricityBoardChecked && form_data[selectedTab].invalid.electricity]" required />
<html ng-app="app" ng-controller="ctrl">
<select id="state" ng-model="states" ng-options="state for (state,states) in total_states">
<option value=''>Select State</option>
</select>
<select id="district" ng-model="districts" ng-options="district for (district,districts) in states">
<option value=''>Select District</option>
</select>
<select id="city" ng-model="cities" ng-options="cities for cities in districts">
<option value=''>Select City</option>
</select>
<br>
<br>
<br>
State :: {{states}}
<br>
<br>
<br>
District:: {{districts}}
<br>
<br>
<br>
City :: {{cities}}
for controller:
app.controller('ctrl',ctrl);
ctrl.$inject=['$scope'];
function ctrl($scope) {
$scope.total_states = {
'Andhra Pradesh': {
'Prakasam': ['Ongole', 'Chirala', 'Mrakapuram'],
'Krishna': ['Vijayawada', 'Machalipatnam'],
'Guntur': ['Guntur', 'Tenali', 'Bapatla']
},
'Telangana': {
'Hyderabad': ['Hyderabad'],
'Warangal': ['Wrangal', 'Hanmkonda'],
'Khammam': ['Khmammam', 'Badrachalam']
}
};
}
try this it works...
<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>