Angularjs 如何使用ionic从每个状态的数组中显示标题？_Angularjs_Ionic Framework_Angularjs Scope

Angularjs 如何使用ionic从每个状态的数组中显示标题？

angularjs ionic-framework

Angularjs 如何使用ionic从每个状态的数组中显示标题？,angularjs,ionic-framework,angularjs-scope,Angularjs,Ionic Framework,Angularjs Scope,我正在尝试使用ionic制作一个播放列表应用程序，我想在每个状态下按id显示标题（这是ionic sidemenu模板中的入门应用程序，从一开始就没有太多更改），下面是代码： app.js路由=> .state('app.single', { url: '/playlists/:playlistId', views: { 'menuContent': { templateUrl: 'templates/playlist.html', controller: '

我正在尝试使用ionic制作一个播放列表应用程序，我想在每个状态下按id显示标题（这是ionic sidemenu模板中的入门应用程序，从一开始就没有太多更改），下面是代码：

app.js路由=>

 .state('app.single', {
  url: '/playlists/:playlistId',
  views: {
   'menuContent': {
     templateUrl: 'templates/playlist.html',
     controller: 'PlaylistCtrl'
    }
  }
})

controllers.js controller=>

.controller('PlaylistsCtrl', function($scope) {
  $scope.playlists = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
  ];
})

.controller('PlaylistCtrl', function($scope, $stateParams) {
  $scope.playlists = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
  ];
})

.controller('PlaylistCtrl', function($scope, $stateParams) {
  $scope.title = $stateParams.playlistTitle;
});

.controller('PlaylistCtrl', function($scope, $stateParams) {
   $scope.playlist = $stateParams.playlist;
});

playlists.html=>

    <ion-view view-title="Playlists">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

<ion-view view-title="Playlists">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.title}}">
      {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>


{{playlist.title}

playlist.html=>

    <ion-view view-title="Playlist">
  <ion-content ng-repeat="playlist in playlists">
    <h1>Playlist {{playlist.title}}</h1>
  </ion-content>
</ion-view>

<ion-view view-title="Playlist">
  <ion-content>
    <h1>Playlist {{ title }}</h1>
  </ion-content>
</ion-view>

    <ion-view view-title="Playlist">
    <!-- <ion-view view-title="{{ playlist.title }}"> -->
      <ion-content>
        <h1>Playlist {{ playlist.title }}</h1>
        <p>{{ playlist.description}}</p>
      </ion-content>
    </ion-view>


播放列表{{Playlist.title}

所以我认为我没有使用好的方法，但我尝试了很多东西，使用ng bind和ng controller，在第一个控制器中使用数组，使用离子列表和项，但似乎没有任何效果

为了帮助您了解我尝试做的事情：

在主状态（playlists.html）上有一个音乐性别播放列表（controllers.js中的列表），可以单击列表中的每个元素
当我们点击一个元素时，我们到达一个状态（playlist.html），其中只有“playlist”后跟id中的状态标题，比如第一个是playlist Reggae，第二个是playlist Chill

但有了我给出的代码，每个标题都叠加在每个州上

通过一些其他代码，我找到了如何在每个州都有播放列表Reggae，但这并不好，或者我发现在每个州的每个元素之前都有一个包含单词Playlist的完整列表，这也不好

假设您在基本模板上没有做太多工作，您也可以：

1）将该播放列表阵列复制到您的播放列表控制器（您必须构建该阵列，并根据通过url传递的：playlist id显示正确的标题。错误做法

2）使用服务共享数据

3）通过状态参数传递标题

没有测试。仅使用以前经验中的一些信息

有人在爱奥尼亚论坛上给我一个答案，我对它做了一点修改，现在它是这样的：

app.js路由=>

.state('app.single', {
  url: '/playlists/:playlistTitle',
  views: {
    'menuContent': {
      templateUrl: 'templates/playlist.html',
      controller: 'PlaylistCtrl'
    }
  }
})

controllers.js controller=>

.controller('PlaylistsCtrl', function($scope) {
  $scope.playlists = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
  ];
})

.controller('PlaylistCtrl', function($scope, $stateParams) {
  $scope.playlists = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
  ];
})

.controller('PlaylistCtrl', function($scope, $stateParams) {
  $scope.title = $stateParams.playlistTitle;
});

.controller('PlaylistCtrl', function($scope, $stateParams) {
   $scope.playlist = $stateParams.playlist;
});

playlists.html=>

    <ion-view view-title="Playlists">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

<ion-view view-title="Playlists">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.title}}">
      {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>


{{playlist.title}

playlist.html=>

    <ion-view view-title="Playlist">
  <ion-content ng-repeat="playlist in playlists">
    <h1>Playlist {{playlist.title}}</h1>
  </ion-content>
</ion-view>

<ion-view view-title="Playlist">
  <ion-content>
    <h1>Playlist {{ title }}</h1>
  </ion-content>
</ion-view>

    <ion-view view-title="Playlist">
    <!-- <ion-view view-title="{{ playlist.title }}"> -->
      <ion-content>
        <h1>Playlist {{ playlist.title }}</h1>
        <p>{{ playlist.description}}</p>
      </ion-content>
    </ion-view>


播放列表{{title}

我将在一个真正的应用程序中使用这项服务，但这项服务是用于培训的

谢谢大家的回复，如果有人有更好的建议，就发布吧

title by参数对title的作用很好。但您可以通过param发送整个playlist对象，以便能够访问所有属性，而不仅仅是标题：

app.js路由添加=>

.state('app.single', {
  url: '/playlist',
  params: {
     playlist: null
  },
  views: {
    'menuContent': {
      templateUrl: 'templates/playlist.html',
      controller: 'PlaylistCtrl'
    }
  }
})

controllers.js controller=>

.controller('PlaylistsCtrl', function($scope) {
  $scope.playlists = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
  ];
})

.controller('PlaylistCtrl', function($scope, $stateParams) {
  $scope.playlists = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
  ];
})

.controller('PlaylistCtrl', function($scope, $stateParams) {
  $scope.title = $stateParams.playlistTitle;
});

.controller('PlaylistCtrl', function($scope, $stateParams) {
   $scope.playlist = $stateParams.playlist;
});

playlists.html更改=>

<ion-item ng-repeat="playlist in playlists" ui-sref="app.single({playlist: playlist})">
  {{playlist.title}}
</ion-item>


{{playlist.title}

playlist.html=>

    <ion-view view-title="Playlist">
  <ion-content ng-repeat="playlist in playlists">
    <h1>Playlist {{playlist.title}}</h1>
  </ion-content>
</ion-view>

<ion-view view-title="Playlist">
  <ion-content>
    <h1>Playlist {{ title }}</h1>
  </ion-content>
</ion-view>

    <ion-view view-title="Playlist">
    <!-- <ion-view view-title="{{ playlist.title }}"> -->
      <ion-content>
        <h1>Playlist {{ playlist.title }}</h1>
        <p>{{ playlist.description}}</p>
      </ion-content>
    </ion-view>


播放列表{{Playlist.title}
{{playlist.description}

顺便说一句，如果您愿意，您可以在“离子视图标题”属性中使用播放列表的标题

你需要向我们展示你的路线（app.js）。您需要将控制器连接到您的路线。。。请不要使用“屏幕”，而是“状态”。[whatever].html是您的模板，请确保在app.js中声明状态时调用了正确的控制器和相对视图。如果设置正确，您的数据应该依赖于服务。您正在两个不同的控制器中复制相同的数据：recipe for disaster。我从app.js中放置了路由，但我找到了一个没有第二个数组的解决方案，我将把它放在其他用户的答案中。。。谢谢你关于这项服务的建议，我下次会试试；在这里，这只是一个实践的框架。。。