5

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> ......
Improve this question
12
  • Can you please share your controller code?Are you using Angular router? Commented May 12, 2017 at 8:16
  • $stateProvider.state('modifClient', { url: '/modifClient', templateUrl: 'templates/modifClient.html', controller: 'ConsultClientCtrl' }); Commented May 12, 2017 at 8:20
  • Just post it as an Edit to your question. Commented May 12, 2017 at 8:21
  • the button works when I put it in other view, but it doesn't work when i put it in this collapse Commented May 12, 2017 at 8:21
  • It s done, the function from where I get ng-repeat values works fine, because I use it in other view. Thank you Commented May 12, 2017 at 8:24

3 Answers 3

Reset to default
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).

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Yes I tried it , but still not working , I tried also to put just <a href=.. ></a> but it does not work, it seems that everything in this collapse doesn't work
Yes it works, I can see more information when I click
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
try <a class="button button-info" ng-href="modifClient/{{x.CodeClient}}"> ... and I think I answerd your orig question.
Thank you Edwin! ng-href and div are the trick to solve my problem. Thank you
|
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.

Improve this answer

7 Comments

@SalamSalam Try it without the /, I mean ui-sref="modifClient", because we shoul refer to the state name and not it's url.
It works when I changed the <a> to <div> 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}}"
@SalamSalam you should pass them like this: ui-sref="modifClient({client: x})".
Thank you, but it doesn't work, I still have the informations of all clients!
@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.
|
0

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' });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.