Querystring with multiple parameters in angularjs

Question

i try to produce a querystring in my MEANJS application. The querystring should hold multiply parameters that can be changed with an ng-click. I run into some problems as i try to concatinate the different parameters for the query, here is what i have done so far.

    <md-list layout="column" layout-align="center" flex="100" ng-cloak>

  <!-- syllableCount -->
  <md-list-item>
    <label flex="20">Silbenanzahl</label>
      <md-button type="button" class="btn btn-sm min-width-45"
        ng-click="searchSpec('syllableCount=1')">1
      </md-button>
      <md-button type="button" class="btn btn-sm min-width-45"
        ng-click="searchSpec('syllableCount=2')">2
      </md-button>
      <md-button type="button" class="btn btn-sm min-width-45"
        ng-click="searchSpec('syllableCount=3')">3
      </md-button>
      <md-button type="button" class="btn btn-sm min-width-45"
        ng-click="searchSpec('syllableCount=4')">4
      </md-button>
  <md-divider ng-if="!$last"></md-divider>
</md-list-item>
<!-- end -->

  <!-- syllableStructur -->
  <md-list-item>
    <label flex="20">Silbenstruktur</label>
      <md-button type="button" class="btn btn-sm min-width-45"
        ng-click="searchSpec('syllableStructur=einfach')">einfach
      </md-button>
      <md-button type="button" class="btn btn-sm min-width-45"
        ng-click="searchSpec('syllableStructur=komplex')">komplex
      </md-button>
  <md-divider ng-if="!$last"></md-divider>
</md-list-item>
<!-- end -->

I implemented ng-click for the two listitems for the searchSpec function. The parameters ( for example "syllableCount=2" ) should go into the querystring in the controller file:

    $scope.searchSpec = function(attr) {
     var result = $http.get('/api/words/?' + attr)
     .success(function(result) {
       $scope.searchWords = result; // will be used for ng-repeat
       console.log($scope.searchWords);
       console.log(attr);
  });
};

For now it works fine, if i click some one of the buttons the right query gets build up and the output is (on this case) a list of words with the syllableCount of 1,2,3 or 4 OR with a syllableStructure of einfach (easy) OR komplex (complex).

My Goal is that i can have a list of words with, lets say syllableCount 2 AND a syllableStructure of einfach (easy).

what i tried for this was this:

    $scope.searchCount = function(attr) {
     $scope.count = attr;
    };

    $scope.searchStruct = function(attr) {
     $scope.struct = attr;
    };

$scope.searchSpec = function(attr) {
  var result = $http.get('/api/words/?syllableCount=' + $scope.count + '&' + 'syllableStructur=' + $scope.struct)
  .success(function(result) {
    $scope.searchWords = result;
    console.log($scope.searchWords);
    console.log(attr);
  });
};

The two new functions get called in the html from the buttons and i try to concatinate the results to a string. However it did not work. It did not show the results (count=2 AND struct=einfach) If i type it in hardcoded like this:var result = $http.get('/api/words/?syllableCount=' + 2 + '&' + 'syllableStructur=' + einfach) it works fine.

Is it the right way to do it, or am i wrong here?

nikk wong · Accepted Answer · 2016-05-21 06:56:03Z

1

It looks to me like you are resetting the $scope.searchwords object every time you make a http call, i.e. every click (searchSpec function is called).

What is $scope.searchWords? If you're wanting to continue to add data to it dependent on clicks, you best make an array and push to it, i.e.

$scope.searchSpec = function(attr) {
  var result = $http.get('/api/words/?syllableCount=' + $scope.count + '&' + 'syllableStructur=' + $scope.struct)
  .success(function(result) {
    $scope.searchWords.push(result.data);
  });
};

Just make sure to not reassign the $scope.whatever object every time you get a result.

$scope.searchSpec = function(attr) {
  var result = $http.get('/api/words/?syllableCount=' + $scope.count + '&' + 'syllableStructur=' + $scope.struct)
  .success(function(result) {
    $scope[attr].push(result.data);
  });
};

answered May 21, 2016 at 6:56

nikk wong

8,8386 gold badges60 silver badges72 bronze badges

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

6 Comments

d8ta Over a year ago

I see my mistake here. I just save the results of the clicks to searchWord and than use an ng-repeat on it, but since i am not using an array here it did not work. Thank you, i will try with an array.

d8ta Over a year ago

So now its an array and data gets added, but so far it pushes a whole array to the searchWord []. How do i get the right data? I tried it like this: $scope.searchWords.push({ grapheme: result.grapheme });

d8ta Over a year ago

Here is my ng-repeat: data-ng-repeat="word in searchWords and i use it with <h4 data-ng-bind="word.grapheme"></h4>

d8ta Over a year ago

UPDATE: its working, justet needed to use the ng-repeate with array of arrays like here Stackoverflow - AngularJS ng-repeat array of arrays thx for the help

nikk wong Over a year ago

Awesome :-) hope I helped

|

Collectives™ on Stack Overflow

Querystring with multiple parameters in angularjs

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related