如何在每个 ng-repeat 项目中放置 ui 路由器状态答案

【问题标题】：how to place ui router state inside each ng-repeat item如何在每个 ng-repeat 项目中放置 ui 路由器状态
【发布时间】：2016-12-12 11:22:15
【问题描述】：

我想在单独的页面中为我的每个项目附加一个状态，因为每个项目

有一个控制器和模板，除了 ui-router 配置之外，一切都很好。这是我的 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'
                }
            }

使用 ng-repeat 我正在遍历 json 文件为每个应用添加信息页面

 <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>

在我的信息页面中，我想为每个应用添加一个按钮，使用应用 ID；这是我的信息页面，但我收到一个错误，因为每个应用程序都有不同的状态名称；当我输入相同的名称时，我收到错误，即名称不能在 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>

每个应用都应该有不同的州名；你不能让它们相似，只能访问一个页面；我需要通过添加 id 变量来访问每个页面到 app.js 或到 ui-sref 链接

【问题讨论】：

能把错误和plnkr放在一起吗？
没有，因为 plnkr 中没有状态改变只是我想使用这个表达式 home/:id 两次，例如 url 将是 #/home/7/7 因为第一个数字是页码，第二个是应用编号
首先，网址必须以斜杠 / 开头，因此您的网址均无效。请在您尝试后更新。
@Muli Yulzary 一切正常，只是按钮中的最终网址 continue 不起作用，因为每个应用程序都应该有不同的状态名称；当我添加按钮时，你不能让它们相似只有一个可以访问的页面我需要通过 id 访问每个页面

标签： angularjs multidimensional-array angularjs-directive angularjs-scope angular-ui-router

【解决方案1】：

经过搜索，我在这里找到了答案：ui-sref-and-variable-state-parameter-names

 $scope.clickHandler = function(param){
$state.go('app.app.'+param,{id:param});
}

【讨论】：