javascript - How can I route to different URLS in angularjs UI-Router for items in ng-repeat, Need to modify state in ui-router -


i using ui-router , html looks below:

<body ng-controller="myctrl">   <h1>hello plunker!</h1>   <ul>     <li ng-repeat = "guy in  guys">       <a ui-sref="person">{{guy}}{{$index+1}}</a>     </li>   </ul> </body>

the output below:

hello plunker!

file1
file2
file3

and angular code below:

var app = angular.module('app', ['ui.router']);  app.controller('myctrl', function($scope) {   $scope.val = "this message..."   $scope.guys = ['file1','file2','file3'] });  app.config(function($stateprovider, $urlrouterprovider) {     $stateprovider     .state('person{something needs here}', {         url: "/route1",         templateurl: "file1.html"     })     .state('person{something needs here}', {         url: "/route2",         templateurl: "file2.html"     })     })

can with needs populated here, goal clicking file1 should open file.html , clicking file2 should open file2.html

in short question how open different files/templates/partials when clicking on items repeated in ng-repeat directive , how specify url parameters in state of ui-router

thanks much

http://plnkr.co/edit/p6qlzh7xjjexuj5i8z8h?p=preview

i created updated plunker here

state looking this:

.state('guy_route2', {     url: "/route/{index:int}",     templateprovider: function($templaterequest, $stateparams) {        var index = $stateparams.index + 1;       var templatename = 'file' + index + '.html';        return $templaterequest(templatename);     }, })

this body:

<body ng-controller="myctrl">      <ul>     <li ng-repeat = "guy in guys">       <a ui-sref="guy_route2({index: $index})">{{guy}}</a>     </li>   </ul>    <h3>target state</h3>   <div ui-view=""></div> </body>

see <div ui-view=""></div>, essential target our states. , ui-sref: 

 ui-sref="guy_route2({index: $index})"

where pass state name 'guy_route2', , function call contains object representing state params ({index: $index})

check here

the templateprovider "magic" details found here:

extend:

with radio adjust like this

  <h3>radio</h3>   <ul>     <li ng-repeat="guy in guys">       <input type="radio"        value="{{$index}}"       ng-model="model.selected"        ng-change="go(model.selected)"        id="something{{$index}}"       /><label for="something{{$index}}">{{guy}}</label>     </li>    </ul>

and go function

$scope.model = { selected: null };  $scope.go = function(index){      $state.go('guy_route2', {index: index}) ;} });

check here


Comments

Post a Comment

Popular posts from this blog

How to connect android app to App engine -

i'm trying connect app in android server i've opened on appengine. my server's name : dddd-daniel-2345 , website server : http://dddd-daniel-2345.appspot.com/ this how connect android app server in app engine: app.yaml: application: dddd-daniel-2345 version: 1 runtime: python27 api_version: 1 threadsafe: yes handlers: - url: .* script: main.app libraries: - name: webapp2 version: "2.5.2" main.py: #!/usr/bin/env python # # copyright 2007 google inc. google.appengine.api import users import webapp2 class userhandler(webapp2.requesthandler): def get(self): user = users.get_current_user() if user: greeting = ('%s,%s,%s' % (user.email(),user.user_id(),user.nickname())) else: greeting = ('not logged in') self.response.out.write(greeting) app = webapp2.wsgiapplication([('/', userhandler),], debug=true) my applications code : add manifast main....
Read more

gcc - MinGW's ld cannot perform PE operations on non PE output file -

i know there other similar questions out there, stackoverflow or not. i've researched lot this, , still didn't find single solution. i'm doing operative system side project. i've been doing in assembly, wanna join c code. test, made assembly code file (called test.asm): [bits 32] global _a section .text _a: jmp $ then made c file (called main.c): extern void a(void); int main(void) { a(); } to link, used file (called make.bat): "c:\mingw\bin\gcc.exe" -ffreestanding -c -o c.o main.c nasm -f coff -o asm.o test.asm "c:\mingw\bin\ld.exe" -ttext 0x100000 --oformat binary -o out.bin c.o asm.o pause i've been researching ages, , i'm still struggling find answer. hope won't flagged duplicate. acknowledge existence of similar questions, have different answers, , none work me. question: what doing wrong? old mingw versions had problem "ld" not able create non-pe files @ all. maybe current versions...
Read more

php - display validation error message next to the textbox in codeigniter -

Image
i'm newbie codeigniter.i want display error message next text box.my view file create.php contains following code. <?php echo validation_errors(); //validation echo form_open('news/create'); //create form ?> <div class="boxes"> <div class="common"> <div class="lables"> <label for="name">name</label> </div> <div class="text_boxes"> <input type="text" name="uname" /><div id="infomessage"><?php echo $message;?></br> </div> </div>` and below controller model: public function create() { $this->load->helper('form'); $this->load->library('form_validation'); $data['title'] = 'insert items'; $this->form_validation->set_rules('uname','required|min_length[6]|m...
Read more