When the html page loads I need to load the default tableView.html which is present in the views folder. This is not working
But when I change the drop down "Table View" or "List View" it works.
The problem I think is that if I am giving
$scope.employeeView = 'tableView.html';
then the Table View will be shown in default when the page loads.
But how can I call a html page inside a folder.
I am attaching the code
Thanks in advance.
$scope.employeeView = 'views/tableView.html';
<div id="tableView">
<label for="selectView">Select View</label>
<select id="selectView" ng-model="employeeView">
<option value="views/listView.html">List View</option>
<option value="views/tableView.html">Table View</option>
</select>
</div>
<br>
<div ng-include="employeeView"></div>
Initially
$scope.employeeView = '/views/tableView.html';
<div id="tableView">
<label for="selectView">Select View</label>
<select id="selectView" ng-model="employeeView">
<option value="views/tableView.html">Table View</option>
<option value="views/listView.html">List View</option>
</select>
</div>
Folder Structure
Since i was running in my local machine on chrome Cross origin requests are only supported for protocol schemes . So the view wasn't showing. But the code was correct.
$scope.employeeView = 'views/tableView.html';
Related
I have seen few answers which were working for ng-repeat, but with ng-options I am facing issue.
Problem : Want to show the error message required if the dropdown is touched and nothing is selected, I am able to do this with input fields.
JS CODE
$scope.personMap = [{ name:"Abc", id:"a"},
{ name:"XYZ", id:"b"},
{ name:"FGH", id:"c"},
{ name:"TY", id:"d"}
}]
HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
<option value="" selected hidden/> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
Referred this ng-repeat solution
As there is no answer yet, I am posting the issue i found out.
So when i use ng-options it starts adding one extra row in the dropdown which can be blank or you can give something like select me.
I added the below code to fix that and in chrome it does not show any blank row.
<option value="" selected hidden/> </select>
But when i try in IE it still have a blank row, So what happens is when I select one value in dropdown and then click back on the blank row the ngMessage works fine.So if i add one more blank option in chrome and then try to select something first and then click on blank the ngMessage work as expected.
Issue is
I was expecting <select> to work like the input fields and was trying to use the$touched` state. But it does not work like that, I was thinking as soon as i click on the dropdown ngMessage should get active if i leave the focus to other field without selecting anything from dropdown. Not sure if I can make it possible through any other way.
Updated HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
<option value="">Select one </option> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
i ust use ng-options in a select element in angular js. and in select select i just wants to add a extra options at the beginning of options.my code ===>
<div class="form-group">
<select class="form-control select2" ng-options="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
</select>
</div>
that is not working for me ? i dont know why.then i search on net and found some solution like =>
angularJS - add a Static option with ng-options
Add two extra options to a select list with ngOptions on it
Angular ng-options - Is there a way to add an option when the model contains a value not present in the options list?
after see above solutions i tried =>
<div class="form-group">
<select class="form-control select2" ng-options="" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
<option ng-repeat="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id">{{(o.fullName+' ('+o.email+')')}}</option>
</select>
</div>
after doing this this is also showing something like =>
but that is also not working for me i dont know why? can anybody help me ???
I'm trying to implement select options provided by ionic framework
as mentioned here
http://ionicframework.com/docs/v2/api/components/select/Select/
<ion-item>
<ion-label>Toppings</ion-label>
<ion-select multiple="true" okText="Okay" cancelText="Dismiss">
<ion-option ng-selected="selected">Bacon</ion-option>
<ion-option>Black Olives</ion-option>
<ion-option>Extra Cheese</ion-option>
<ion-option>Mushrooms</ion-option>
<ion-option>Pepperoni</ion-option>
<ion-option>Sausage</ion-option>
</ion-select>
</ion-item>
On rendering the page, the select options they don't show up correctly and appears like a single list item.
I looked for examples everywhere but most of them uses the standard html select tag instead of ion-select. Is this because ion-select requires additional css or do I need add some more code to make it work ? I'm really not sure what am I missing here.
If you make app in Ionic 1 then you need to use Ionic 1 documentation.
Try something like this.
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Toppings
</div>
<select>
<option>Black Olives</option>
<option selected>Bacon</option>
<option>Extra Cheese</option>
<option>Mushrooms</option>
<option>Pepperoni</option>
<option>Sausage</option>
</select>
</label>
</div>
Additionally:
Ionic Directive to Select multiple options (CodePen)
Cool Select with ionic (CodePen)
I was just thrown for a loop by scope creep/change on this project.
Initially there were 6 buttons on a page (with other stuff) triggering routes to 6 different Add New ... Forms. I had all the buttons wired to the routes and working.
On Friday, the UIX leader decided that the landing page was too complex and convinced the stakeholders that a single "ADD NEW REQUEST" button was needed leading to a drop down wherein the user could choose the correct form.
So my template looks like this:
<form>
<div class="row">
<div class="form-group col-lg-12">
<label for="requestType">What type of request would you like to create?
<span class="required">*</span>
</label>
<select class="form-control" name="requestType" ng-model="requestType" ng-change="new_form_select()">
<option value="0">Please Select ...</option>
<option value="1">IT Web Task</option>
<option value="2">SAP Task</option>
<option value="3">Email Campaign</option>
<option value="4">Third Party Suppression</option>
<option value="5">Report Request</option>
<option value="6">Other / I'm Not Sure</option>
</select>
</div>
</div>
</form>
I have templates of webtask.html, saptask.html, campaign.html, suppression.html, report.html, generalrequest.html.
I realized when I got this far that I don't have a clue what to do next. Should I put all of those forms on the same page hidden and show them based on the selection (can I even do that?) or should I make the select sort of a page jump menu and load the applicable form when selected (do I do that in the controller?)
OMG, I am lost!
Needless to say, this is my first Angular Project ... I used to use pure jQuery and am learning AngularJS.
Any guidance is GREATLY appreciated!!!
I can't solve this problem for you but I can guide you through the main steps of a simple solution:
Take a look at angular-ui-router
The method called on your select ng-change would redirect to the state for the selected form:
<select class="form-control"
name="requestType"
ng-model="requestType"
ng-change="new_form_select()">
<option value="0">Please Select ...</option>
<option value="webtask">IT Web Task</option>
<option value="saptask">SAP Task</option>
....
</select>
$scope.new_form_select = function() {
if(requestType) {
location.href = '#/' + requestType;
}
}
You now need to define the states and link the templates. Angular-UI-Router has a few examples in it's documentation but it would be something like:
.state('webtask', {
url: "/webtask",
templateUrl: "templates/webtask.html",
controller: function() {
}
})
.state('saptask', {
url: "/saptask",
templateUrl: "templates/saptask.html",
controller: function() {
}
})
// you get the idea..
Now you need to add the markup where these templates will be placed in your page. Again Angular-UI-Router has a few examples on how this can be done:
<body>
<!-- Your select could be here -->
<!-- The selected template would appear here -->
<div ui-view></div>
</body>
Of course you need to add the $stateProvider, $urlRouterProvider in the config for your main controller but all this is explained in the Angular-UI-Router page.
I am running on:
windows 7
watir-webdriver 0.6.4
selenium-webdriver (2.35.1, 2.35.0, 2.31.0)
<div>
//more embedded codes...
<div id="emd1" class="ui-select" style="float: left; width: 90%;">
<a id="emb1" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-d" href="#" role="button" aria-haspopup="true" aria-owns="emb1" data-theme="d">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text">Choose one... </span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
</span>
</a>
<select id="emu1" data-placeholder="true" data-native-menu="false" serial="1" sequenceid="1" tabindex="-1">
<option value="">Choose one...</option>
<option value="A">Apple </option>
<option value="B">Banana </option>
<option value="C">Cat </option>
<option value="D">Dog </option>
<option value="E">Elephant </option>
<option value="F">Fish </option>
</select>
</div>
</div>
whenever I want to select ddl, I just do this all the time and it always worked fine
browser.select_list(:id = "emu1").select("Apple")
and it will get the job done. Suddenly it stop working. I am not sure if its due to recent upgrade I did on selenium-webdriver, and watir-webdriver. Or due to code change.
browser.a(:id => "emb1").wait_until_present
works fine
browser.select_list(:id => "emu1").wait_until_present
wait for 30 sec and giving me the couldn't find element error.
anyone else having any similar issue? Any help is good. Thanks in advance.
Without seeing the CSS that displays the HTML I cannot be 100% certain, but I have a hunch the user-facing select list is actually a styled <span>. The <select> is likely being hidden by CSS. If the <select> is hidden by CSS, webdriver is unable to 'see' the it.
To expose select lists like this, I've used JavaScript to alter the select's display attribute. I've added this snippet to my watir-webdriver toolbox before accessing fancy select_lists:
script = %q{document.getElementById("emu1").style.display = "block");}
browser.execute_script(script)
This alters the display properties of the select list, so it can now accessed by the all of the select_list commands available to webdriver.
You can give this a try by heading to the page with the select list and opening the developer console of your preferred web browser. Try the following and see if you now see a select list appear:
document.getElementById("emu1").style.display = "block";
If that doesn't work, try using display = "inline". If a standard HTML select list now displays, you've found the culprit and the solution.