angularjs 中具有多个参数的查询字符串
Querystring with multiple parameters in angularjs
我尝试在我的 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);
});
};
现在它工作正常,如果我单击其中一个按钮,则会建立正确的查询并且输出是(在这种情况下)音节数为 1、2、3 或 4 的单词列表或具有 einfach(简单)或 komplex(复杂)的音节结构。
我的目标是我可以有一个单词列表,假设 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)
它工作正常。
这是正确的做法,还是我错了?
在我看来,您每次进行 http
调用时,即每次点击(调用 searchSpec
函数)时,您都在重置 $scope.searchwords
对象。
什么是$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);
});
};
我尝试在我的 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);
});
};
现在它工作正常,如果我单击其中一个按钮,则会建立正确的查询并且输出是(在这种情况下)音节数为 1、2、3 或 4 的单词列表或具有 einfach(简单)或 komplex(复杂)的音节结构。
我的目标是我可以有一个单词列表,假设 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)
它工作正常。
这是正确的做法,还是我错了?
在我看来,您每次进行 http
调用时,即每次点击(调用 searchSpec
函数)时,您都在重置 $scope.searchwords
对象。
什么是$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);
});
};