在angularjs

时间:2016-05-21 06:20:36

标签: javascript angularjs meanjs

我尝试在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 -->

我为searchSpec函数的两个列表项实现了ng-click。参数(例如“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或者einfach(easy)或komplex(complex)的音节结构。

我的目标是我可以有一个单词列表,比如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);
  });
};

这两个新函数在按钮的html中被调用,我尝试将结果合并为一个字符串。但它没有用。它没有显示结果(count = 2 AND struct = einfach)如果我用硬编码键入它:var result = $http.get('/api/words/?syllableCount=' + 2 + '&' + 'syllableStructur=' + einfach)它可以正常工作。

这是正确的做法,还是我错了?

1 个答案:

答案 0 :(得分: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);
  });
};