AngularJS: Determining Template based on Select Control -

-

i thrown loop scope creep/change on project.

initially there 6 buttons on page (with other stuff) triggering routes 6 different add new ... forms. had buttons wired routes , working.

on friday, uix leader decided landing page complex , convinced stakeholders single "add new request" button needed leading drop down wherein user choose correct form.

so template looks this:

<form>     <div class="row">         <div class="form-group col-lg-12">             <label for="requesttype">what type of request 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 got far don't have clue next. should put of forms on same page hidden , show them based on selection (can that?) or should make select sort of page jump menu , load applicable form when selected (do in controller?)

omg, lost!

needless say, first angular project ... used use pure jquery , learning angularjs.

any guidance appreciated!!!

i can't solve problem can guide through main steps of simple solution:

  1. take @ angular-ui-router

  2. the method called on select ng-change redirect state 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;     } }

  3. you need define states , link templates. angular-ui-router has few examples in it's documentation like:

    .state('webtask', {     url: "/webtask",     templateurl: "templates/webtask.html",     controller: function() {      } }) .state('saptask', {     url: "/saptask",     templateurl: "templates/saptask.html",     controller: function() {      } }) // idea..

  4. now need add markup these templates placed in page. again angular-ui-router has few examples on how can done:

    <body>     <!-- select here -->      <!-- selected template appear here -->     <div ui-view></div> </body>

of course need add $stateprovider, $urlrouterprovider in config main controller explained in angular-ui-router page.


Comments

Post a Comment

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

-
i used pyinstaller create standalone exe file pyqt project. did not use single file option because exe created single file option takes long open. therefore, pyinstaller created dist folder contains bunch of files including program.exe file. create setup.exe file place contents of dist folder in program directory , create shortcut in start menu , on desktop. want super simple user. maybe setup.exe files when download program cnet. found inno-setup, looks promising. however, not know if there special considerations because program standalone program create python/pyqt program. thanks! have experience task? there program using task not know about? inno-setup or nsis easiest use. tell them files include , put them , create nice installer you. wrote short tutorial on experiences using innosetup might find helpful: http://www.blog.pythonlibrary.org/2008/08/27/packaging-wxpymail-for-distribution/ note tutorial based around wxpython app wrote, concepts same.
Read more

c# - Access objects in UserControl from MainWindow in WPF -

-
i have simple xaml, how can change text property of textblock in usercontrol1 mainwindow ? <window x:class="refactorxaml.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:refactorxaml="clr-namespace:refactorxaml" title="mainwindow" height="350" width="525"> <grid> <grid.rowdefinitions> <rowdefinition height="100"></rowdefinition> <rowdefinition height="100"></rowdefinition> </grid.rowdefinitions> <grid> <refactorxaml:usercontrol1></refactorxaml:usercontrol1> </grid> <grid grid.row="1"> <button>change text</button> </grid> </grid> </window> <usercon...
Read more

javascript - How to name a jQuery function to make a browser's back button work? -

-
i'm trying write function ajaxyfy web site, works perfect, except function button. that's have now: function loading() { if (typeof history.pushstate !== "undefined") { var historycount = 0; $('.menu-item, .logo').on('click','a',function(e){ e.preventdefault(); $(this).data('clicked', true); if ($(this).is('.logo a')) { var homepage = $(this).attr('href'); function1(homepage); history.pushstate(null, null, homepage); } else if ($(this).is('.projects a')) { var projects = $(this).attr('href'); function2(projects); history.pushstate(null, null, projects); } else { var pages = $(this).attr('href'); function3(pages); history.pushstate(null, null, pages); ...
Read more