使用 AngularJS 单击按钮时在新页面中查看详细信息

我想在下一个视图中显示单击的行按钮详细信息，我只显示在代码中，第一页的nom和单击按钮后将查看其余字段。我使用选项"filter"来执行此操作，但有时它会返回不相关代码的详细信息，例如两个代码：45 和 453，由于公共数字"45"，它给出了相同的详细信息。

第一个网页：

<div class="row header">
          <div class="col" >Code</div>
          <div class="col">Client</div>        
</div>
<div class="row" ng-repeat="x in namesC">
          <div class="coll"> 
             <a class="button" href="#/detail/{{x.Code}}">
             {{x.Code}}</a> 
          </div>
          <div class="col"> {{x.NomClient}}  </div>              
</div>

第二个 HTML 页面(详细信息.html(：

 <ion-list ng-repeat="x in namesC| filter: {Code: thisX}|limitTo:1"> 
          <ion-item> 
          <div class="item item-divider center-text"> {{x.Code}}</div>
          </ion-item>
          <ion-item>
          <b>adresse</b> <span class="item-note">  {{x.adresse}} </span>
          </ion-item>
 </ion-list>

应用程序.js ：

 $stateProvider.state('detailColis', {
            url: '/detail/:Code',
            templateUrl: 'templates/detail.html',
            controller: 'SuiviAdminCtrl' 
        });

你必须添加配置文件或者在html文件中添加向下的代码来解决这个问题

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.htm"
    })
    .when("/detail/:Id", {
        templateUrl : "detail.htm"
    })
});
</script>

我测试了上面的代码，它的工作。

我们可以使用$routeParams，也可以使用服务。请参阅基本示例并尝试如下。

var app = angular.module('exApp',['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
template:'<p>All Datas View</p><p ng-repeat="data in datas">{{data.name}}    <button ng-click="setData(data)">View</button> routeParams..   <button ng-click="setrouteData($index)">Index</button></p>',
 controller: 'ctrl',
})
.when('/detail',{template:'<p>Particular Data View</p><button ng-click="back()">Back</button><br><p>{{data}}</p>',controller: 'ctrlOne'})
 .when('/detail/:id',{template:'<p>Data View</p><button ng-click="back()">Back</button><br><p>{{data}}</p>',
 controller: 'ctrltwo'})
.otherwise({redirectTo:'/'});
}]);
app.controller('ctrl', function($scope,$location,exService){
$scope.datas = exService.data;
$scope.setData = function(data){
//console.log(data);
exService.Obj = data;
$location.path('detail');
}
$scope.setrouteData = function(index){
$location.path('detail/'+ index);
}
});
app.controller('ctrlOne', function($scope,$location, exService){
var data = exService.Obj;
$scope.data=data;
$scope.back = function(){
$location.path('/');
}
});
app.controller('ctrltwo', function($scope,$location, $routeParams,exService){
var data = $routeParams.id; 
$scope.datas = exService.data;
$scope.data=$scope.datas[data];
$scope.back = function(){
$location.path('/');
}
});
app.service('exService', function(){
var Obj = {};
var data = [{"id":1, "name":"xxx"},{"id":2, "name":"yyy"},{"id":3, "name":"zzz"}];
return { Obj, data};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>
<body ng-app="exApp">
<p>Sample</p>
<div ng-view></div>
</body>

这是

解决方案，感谢Sudarshan_SMD解决方案只是更改过滤器：与：

filter: {CodeEnvoiColis: thisX}:true

相关内容

最新更新

热门标签：