How to make href in button inside collapse

Question

I have a collapsed model which show more information about client, and insid it, I have a button, when I click, I don't get the informations of the specific client, I get data of all clients

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

Can you please share your controller code?Are you using Angular router? — cнŝdk, May 12 '17 at 08:16
$stateProvider.state('modifClient', { url: '/modifClient', templateUrl: 'templates/modifClient.html', controller: 'ConsultClientCtrl' }); — Touria, May 12 '17 at 08:20
the button works when I put it in other view, but it doesn't work when i put it in this collapse — Touria, May 12 '17 at 08:21
It s done, the function from where I get ng-repeat values works fine, because I use it in other view. Thank you — Touria, May 12 '17 at 08:24
Your HTML is invalid. You cannot have an `` inside another ``. — Quentin, May 12 '17 at 10:47
It's done! I will add the view expected when clicking on button — Touria, May 12 '17 at 11:01

Edwin · Accepted Answer · 2017-05-12T09:19:46.573

2

You have to use the framework's href: ngHref or ng-click

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

LE: I've created a pen for this case. The problem is that you have an <a> in <a> and when you click it then it get's confused.

So I've changed the <a ng-show="collapsed"> to <div ng-show="collapsed"> and now works as expected (see pen too).

edited May 12 '17 at 09:19

answered May 12 '17 at 07:52

Edwin

2,146
20
26

Yes I tried it , but still not working , I tried also to put just but it does not work, it seems that everything in this collapse doesn't work – Touria May 12 '17 at 08:06
Yes it works, I can see more information when I click – Touria May 12 '17 at 08:10
Yes you're right, I change it, and I had to change /modifClient to modifClient, but what if I want this "modifClient/{{x.CodeClient}} ? please – Touria May 12 '17 at 09:51
try ` ...` and I think I answerd your orig question. – Edwin May 12 '17 at 10:08
It doesn't work with ng-href, it s ui-sref and without / , Mr.chsdk gived me the right answer but you you gived the trick of "div",I do not know to whom I have to give the answer – Touria May 12 '17 at 10:16
that's strange, because on the pen it works with the `ng-href`, `\\ ` and the `div`, but I guess you have more under the hood that you've shared going on – Edwin May 12 '17 at 10:27
When I put ng-href it gives me this error: Cannot GET /modifClient – Touria May 12 '17 at 10:31
try to put `#/modifClient` or try so: http://stackoverflow.com/a/14202514/1595977 but also the `ui-sref` is a valid answer. – Edwin May 12 '17 at 10:38
1

Thank you Edwin! ng-href and div are the trick to solve my problem. Thank you – Touria May 12 '17 at 14:10

score 1 · Answer 2 · edited May 23 '17 at 12:17

1

If you are using Angular ui-router and modifClient is a state in your router, you better use the Angular ui-sref attribute instead of HTML href.

Your code would be :

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

Edit:

If you want to pass an object param in the ui-sref you can do it like this:

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

And change your state settings to include a params object:

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

Note:

Note that you should also update your ConsultClientCtrl controller with a $scope.CodeClient variable so it can be updated from the ui-sref.

You can read How to pass parameters using ui-sref in ui-router to controller for further options.

Edit 2:

After reading your last Edit, I can see that you don't have a CodeClient variable in your controller, so update it like this:

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; 
       });  
   }
});

And in your HTML just use:

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

Without <ion-list ng-repeat ...> and the filter part as we already got the CodeClient variable in the Controller.

edited May 23 '17 at 12:17

Community

1
1

answered May 12 '17 at 08:25

cнŝdk

31,391
7
56
78

@SalamSalam Try it without the `/`, I mean `ui-sref="modifClient"`, because we shoul refer to the state name and not it's url. – cнŝdk May 12 '17 at 08:31
It works when I changed the to
and with doing what you suggested, but the problem now I have informations of all clients, what If want to use this please: ui-sref="modifClient/{{CodeClient}}"
– Touria May 12 '17 at 09:53
@SalamSalam you should pass them like this: `ui-sref="modifClient({client: x})"`. – cнŝdk May 12 '17 at 10:19
Thank you, but it doesn't work, I still have the informations of all clients! – Touria May 12 '17 at 10:37
@SalamSalam If you want to pass only the `CodeClient` value, you should use `x.CodeClient` in `ui-sref="modifClient({CodeClient: x.CodeClient})"` as `x` will hold all the client details. I updated my answer, check it. – cнŝdk May 12 '17 at 10:50
I tried this, and still have the same problem, even the url doesn't change when I click:: still: ...../#/modifClient – Touria May 12 '17 at 10:53
Thank you, Im really sorry, but still have all information – Touria May 12 '17 at 11:25

score 0 · Answer 3 · answered May 12 '17 at 11:49

Thanks for every one,This is the solution I found:

change the code of the button:

<a class="button button-info" ng-href="#/modifClient/{{x.CodeClient}}" >
Enregistrer </a>

And in app.js, I had to use $state:

app.controller("ConsultClientCtrl", function($scope, $http,$state) {

        $scope.loadClient = function(){ 
              $http.get("http://localhost/deb/selectClient.php")  
           .success(function(data){  
                $scope.thisX   = $state.params.CodeClient; 
                $scope.names = data;  
           });
         }             
});

And changing the state provider to this:

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

How to make href in button inside collapse

3 Answers3