0

I want to attach a state for each of my items in a separate page because every one

have a controller and template and every thing okay except the ui-router configuration . this is my app.js

       .state('app.app.0', {
            url: '/home/0/go/',
            views: {
                'content@': {
                    templateUrl: 'views/mohamed ali.html',

                }
            }
        }).state('app.app.1', {
            url: '/home/1/go',
            views: {
                'content@': {
                    templateUrl: 'views/portofolio.html',

                }
            }
        }).state('app.app.2', {
            url: '/home/2/go',
            views: {
                'content@': {
                    templateUrl: 'views/random.html',
                    controller: 'random'
                }
            }
        }).state('app.app.3', {
            url: '/home/3/go',
            views: {
                'content@': {
                    templateUrl: 'views/weather.html',
                    controller: 'weather'
                }
            }

using ng-repeat i'm iterating through json file to add an info page for each app

 <div class="movies">
<ul class="large-block-grid-4 medium-block-grid-3 small-block-grid-2">
    <li ng-repeat="app in apps">
        <figure>
            <img ng-src="img/{{app.img}}.jpg" alt="{{app.name}}" width='250px' height='250px'>
            <figcaption>
                <h3>{{app.name}}</h3>
                <span>{{app.short}}</span>

                <a ui-sref="app.app({id :  app.appId})"  class="btn-mov button expand small">Read More</a>


                 </figcaption>
        </figure>
    </li>
</ul>

inside my info page i want add a button to go for each app using the app id; this is my info page but i get an error because every app has different state name ;when i put the same names i get error that the name cane't be in instaciated

<section class="single-movie row"  >
        <h1>{{apps[id].name}}</h1>
        <img class="col-sm-5  img-responsive" ng-src="img/{{apps[id].img}}.jpg" alt="{{apps[id].name}}" >

        <div class=" col-sm-7 ">
        // this is the button that is not working
        <a ui-sref="app.app({id :  app.appId})/go"  class="btn-app button expand small">continue</a>
<p><a id="back" ui-sref="app" class="button expand small">Back to home</a></p>

every app should have a different state name;you can't make them similar ,only one page that can be accessed; i need to access every page by adding id variable to app.js or to ui-sref link

ibrahim
  • 135
  • 3
  • 9
  • Can you put the error and plnkr? – Gary Aug 06 '16 at 00:53
  • no becauase no state changing in plnkr simply i want to use this expression home/:id twice for example the url will be #/home/7/7 as the first number is the page number and second is the app number – ibrahim Aug 06 '16 at 01:09
  • First, urls must start with a slash `/` so none of your urls are valid. please update when you've tried this. – Muli Yulzary Aug 06 '16 at 03:51
  • @ Muli Yulzary every thing works just the final url in the button continue isn't working because there every app should have a different state name;you can't make them similar ,when i add the button only one page that can be accessed i need to access every page by id – ibrahim Aug 06 '16 at 04:48

1 Answers1

0

after searching I've found the answer here : ui-sref-and-variable-state-parameter-names

 $scope.clickHandler = function(param){
$state.go('app.app.'+param,{id:param});
}
Community
  • 1
  • 1
ibrahim
  • 135
  • 3
  • 9