Geek Answers Handbook

How to make href in a button inside collapse

I have a minimized model that displays more information about the client and does not hide it, I have a button, when I click, I do not receive information about a specific client, I receive data from 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> ......
+5
source share
3 answers

You must use the href framework: ngHref or ng-click

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

LE: I created a pen for this case. The problem is that you have <a> in <a> , and when you click on it, it gets confused.

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

+2
source

If you use Angular ui-router and modifClient is the state of your router, it is better to use the Angular ui-sref instead of HTML href .

Your code will look like this:

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

Edit:

If you want to pass an object parameter to ui-sref , you can do it like this:

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

And change the state settings to include the params object:

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

Note:

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

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

Edit 2:

After reading the last Edit, I see that you do not have the CodeClient variable in your controller, so update it as follows:

 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 filter , since we already got the CodeClient variable in the controller.

+1
source

Thanks for everyone. This is the solution I found:

change the button code:

 <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' });
0
source

More articles:


All Articles