![](/img/trans.png)
[英]After changing my List vom ng-repeat to collection-repeat ng-click is not working properly
[英]ionic collection-repeat working navigation not working on click
我是ionic和angular.js的新手。 我从http://codepen.io/ionic/pen/mypxez下载此离子收集重复和导航示例。 最初的示例可以完美处理单个index.html和index.js文件。 我试图在控制器,服务,app.js和HTML文件中分离代码。 我可以看到这些集合,但是看不到详细信息并无法浏览它。 这是显示所有有效集合的HTML文件:
<ion-view title="Home">
<ion-header-bar class="bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="filter">
</label>
</ion-header-bar>
<ion-nav-buttons side="right">
<a class="button" ng-click="scrollBottom()">
Scroll To Bottom
</a>
</ion-nav-buttons>
<ion-content>
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90" collection-item-width="'100%'"
ui-sref="tab.detail({petsId: pet.id })">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
</ion-content>
</ion-view>
这是app.js的代码:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.detail', {
url: "/detail/:petsId",
views: {
'main': {
controller:'DetailCtrl',
templateUrl: "templates/question-detail.html"
}
}
})
这是永远不会被调用的控制器代码:
.controller('DetailCtrl', function($scope, $stateParams, PetService) {
$scope.pet = PetService.get($stateParams.petsId);
})
...以及question-detail.html代码:
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>
我可以查看收藏集并可以搜索,但是我无法通过单击它们来查看详细信息。 如果我单击项目2,但看不到question-detail.html页面,则可以看到URL( http:// localhost:8100 /#/ tab / detail / 2 )。
考虑到您是这个框架或angularJS本身的新手。 我只是在不回答其他问题的情况下回答这个问题,但是为了将来,请先阅读文档。
<ion-view title="{{pet.id}}">
<ion-content class="padding">
<a href="detail/{{pet.id}}">{{pet.id}}</a>
{{pet.firstName}}
</ion-content>
</ion-view>
感谢karan的迅速回答。.我更改了两件事,代码现在可以正常工作:
我在其中声明了锚标记的html文件。 我将ui-sref更改为href:
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90"
collection-item-width="'100%'" href="#/tab/detail/{{pet.id}}">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
我的app.js文件
.state('tab.detail', {
url: '/detail/:petsId',
views: {
'tab-chats': {
templateUrl: 'templates/question-detail.html',
controller:'DetailCtrl'
}
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.