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.
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>
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';
i am very new to ionic and angularjs. i am using ionic 1 and i want to get a value after make a selection from dropdown..after i select and click next button, the other page will show the name of item that i select.this is on first page. on the second page i want it display communication if i select it on 1st page. i know this is the wrong way..can help me?
<label class="item item-input item-select">
<div class="input-label">
Initiative A
</div>
<select>
<option>Communication</option>
<option>Customer</option>
<option selected></option>
</select>
Save the value in $rootScope
.controller('Ctrl_1',function($rootScope){
$rootScope.myValue= "communication(i.e, use ng-modal)"
})
and access it like this
.controller('Ctrl_2',function($rootScope){
alert("what is my value? " + $rootScope.myValue);
})
You can get the selected option using ng-modal.
<select ng-modal="selectedValue">
<option>Communication</option>
<option>Customer</option>
<option selected></option>
</select>
Now you will get the selected option on controller by $scope.selectedValue.
You can pass this value to next page using $rootScope or as stateParam.
In first controller,
.controller('myCtrl1',function($scope, $rootScope){
$rootScope.myValue = $scope.selectedValue;
})
In second controller,
.controller('myCtrl2',function($scope, $rootScope){
$scope.selectedValue = $rootScope.myValue;
})
You can display this value in second page HTML like {{selectedValue}}
Plunkr: http://plnkr.co/edit/pJRzKn2v1s865w5WZBkR?p=preview
I have 2 forms, a simple and advanced form.
Both have the same options (a lot of options)
Only a couple of differences in the opening select tag which contains
<select ng-show="showSimpleSelect"
ng-model="selected_tag"
ng-change="changeFormTag(formData)"
class="form-control manage-source-input-tag">
<!-- if advanced then -->
<select ng-show="showAdvanceSelect"
ng-model="formData.tag"
ng-change="changeTag(formData.tag)"
class="form-control manage-source-input-tag">
<option value="brand">Brand</option>
<option value="client">Client</option>
<option value="companies">Companies</option>
...
</select ng-show="showSimpleSelect">
</select ng-show="showAdvanceSelect">
In my Directives Controller, I'm using vars like this to show and hide the opening select tags:
vs.showSimpleForm = function() {
vs.showSimpleSelect = true,
vs.showAdvanceSelect = false,
However the HTML ends up looking like this, which breaks the design:
How would you go about refactoring this?
Angular overrides the select tag as a custom directive that expects an ng-options attribute instead of option tags. You can just hard-code your options into an array and put that as the ng-option
//controller
$scope.options = ["brand", "client", "companies"];
//html
<select ng-show="showAdvanceSelect"
ng-model="formData.tag"
ng-change="changeTag(formData.tag)"
ng-options="option for option in options"
class="form-control manage-source-input-tag">
I want to enable deep linking with the select element
<select ng-model="query">
<option ng-repeat="product in products">{{product.code}}</option>
</select>
So when I choose something, I want the url to change to app/productcode
Any ideas?
You should change your select to:
<select ng-model="query" ng-options="product.code for product in products"></select>
In your controller, you'll use the $location service to change to the route you want via a watch. Something along the lines of:
$scope.$watch('query', function() {
$location.path('/some/route/' + query);
});