angularjsに複数のパラメータを持つ文字列

Question

MEANJSアプリケーションでクエリ文字列を生成しようとしています。クエリー・ストリングには、ng-clickで変更できる複数のパラメーターを保持する必要があります。私はいくつかの問題に遭遇します。私はクエリのさまざまなパラメータをconcatinateしようとしています、ここまで私が行ってきたことです。

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

私は、searchSpec関数の2つのリスト項目に対してng-clickを実装しました。今私は、右のクエリが構築取得ボタンのいくつかのいずれかをクリックした場合、それは、正常に動作するために

$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 = 2」）のパラメータは、コントローラファイルにクエリ文字列に入る必要がありますoutputは（この場合）einfach（簡単）OR komplex（複雑）の音節構造を持つ1,2,3または4の音節数を持つ単語のリストです。

私の目標は、私は単語のリストを持つことができます、と言うことができますsyllableCount 2と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); 
    }); 
}; 

2つの新しい関数がボタンからHTMLで呼び出されますが、私は、文字列に結果をconcatinateしてみてください。しかし、それは動作しませんでした。結果が表示されませんでした。（count = 2 AND struct = einfach）このようにハードコードされた場合：var result = $http.get('/api/words/?syllableCount=' + 2 + '&' + 'syllableStructur=' + einfach)うまく動作します。

これは正しい方法ですか、私は間違っていますか？

Answer 1

httpコールを行うたびに$scope.searchwordsオブジェクトをリセットするように見えます。つまり、すべてのクリック（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); 
    }); 
};