Querystring с несколькими параметрами в angularjs

Question

Я пытаюсь создать запрос в моем приложении MEANJS. В строке запроса должны храниться несколько параметров, которые можно изменить с помощью ng-click. Я сталкиваюсь с некоторыми проблемами, поскольку я пытаюсь конкатенировать различные параметры запроса, вот что я сделал до сих пор.

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

Я реализовал ng-click для двух списков для функции searchSpec. Параметры (например, «syllableCount = 2») должны перейти в строку запроса в файле контроллер:

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

На данный момент он работает нормально, если я нажимаю некоторые одну из кнопок права запроса получает строить вверх, а вывод (в этом случае) список слов с syllableCount 1,2,3 или 4 OR с syllableStructure einfach (простой) OR komplex (complex).

Моя цель в том, что я могу иметь список слов с, скажем, syllableCount 2 И syllableStructure einfach (легко).

, что я пытался для этого был такой:

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

Две новых функции вызываются в HTML с помощью кнопок и я стараюсь concatinate результатов в виде строки. Однако это не сработало. Он не показывал результаты (count = 2 AND struct = einfach). Если я напечатаю его в hardcoded следующим образом: var result = $http.get('/api/words/?syllableCount=' + 2 + '&' + 'syllableStructur=' + einfach) работает отлично.

Это правильный способ сделать это, или я здесь не так?

Answer 1

Мне кажется, что вы меняете объект $scope.searchwords каждый раз, когда вы совершаете вызов http, т. Е. Каждый клик (searchSpec функция называется).

Что такое $scope.searchWords? Если Вы желаете продолжать добавлять в него данные в зависимости от кликов, вы лучше сделать массив и нажать на него, то есть

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

Просто убедитесь, что не передать объект $ scope.whatever каждый раз, когда вы получаете результат.

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