如何在折叠内的按钮中制作href

Question

我有一个显示更多客户信息的折叠模型，在里面，我有一个按钮，当我点击时，我没有得到特定客户的信息，我得到所有客户的数据

<ion-list ng-repeat="x in names">
    <a class="item  item-icon-left " >
                <i class="icon ion-android-arrow-dropdown-circle" ng-model="collapsed" ng-click="collapsed=!collapsed"></i>
                {{x.Marque}}   
              </a>
              <div ng-show="collapsed">
                    <table>
                          <thead >
                             <td>   
                                 <label> Code:  </label> {{x.CodeClient}}    <br/> 
                                 <label> Nom:   </label> {{x.NomClient}}     <br/> 
                                <a class="button button-info" ui-sref="modifClient({CodeClient: x})" >
                                Enregistrer
                                </a> 
        ...

app.js

     $stateProvider.state('modifClient', {
                    url: '/modifClient',
                    templateUrl: 'templates/modifClient.html',
                    params: {CodeClient: null},
                    controller: 'ConsultClientCtrl' 
                });
app.controller("ConsultClientCtrl", function($scope, $http) {
$scope.loadClient = function(){ 
           $http.get("http://localhost/deb/debut.php")  
           .success(function(data){  
                $scope.names = data; 
           });  
   }

});

modifClient.html

<ion-content class="padding" ng-controller="ConsultClientCtrl" ng-repeat="x in names | filter: {CodeClient: thisX}" >

  <ion-list ng-repeat="x in names | filter: {CodeClient: thisX}: true">

      <div class="item item-divider center-text" ng-model="CodeClient"> {{x.CodeClient}} </div>
......

Answer 1

你必须使用框架的href:ngHref或ng-click

<a class="button button-info" ng-href="/modifClient"> ...

LE：我为这个案例创建了一个pen。问题是您在<a> 中有一个<a>，当您单击它时，它会感到困惑。

所以我已将<a ng-show="collapsed"> 更改为<div ng-show="collapsed">，现在可以按预期工作（也请参阅笔）。

Answer 2

如果您使用Angular ui-router 并且modifClient 是路由器中的一个状态，则最好使用Angular ui-sref 属性而不是HTML href。

你的代码是：

<a class="button button-info" ui-sref="modifClient">

---

编辑：

如果你想在ui-sref 中传递一个对象参数，你可以这样做：

<a class="button button-info" ui-sref="modifClient({CodeClient: x.CodeClient})">

并更改您的 state 设置以包含 params 对象：

$stateProvider.state('modifClient', {
     url: '/modifClient',
     templateUrl: 'templates/modifClient.html',
     params: {CodeClient: null},
     controller: 'ConsultClientCtrl' 
});

注意：

请注意，您还应该使用$scope.CodeClient 变量更新您的ConsultClientCtrl 控制器，以便可以从ui-sref 更新它。

您可以阅读 How to pass parameters using ui-sref in ui-router to controller 了解更多选项。

---

编辑 2：

阅读您的上一个编辑后，我可以看到您的控制器中没有 CodeClient 变量，因此请像这样更新它：

app.controller("ConsultClientCtrl", function($scope, $http) {
    $scope.CodeClient = null;
    $scope.loadClient = function(){ 
       $http.get("http://localhost/deb/debut.php")  
       .success(function(data){  
            $scope.names = data; 
       });  
   }
});

在你的 HTML 中使用：

<div class="item item-divider center-text"> {{CodeClient}} </div>

没有<ion-list ng-repeat ...> 和filter 部分，因为我们已经在控制器中获得了CodeClient 变量。