angularjs select标签中参数的传递

时间:2021-07-30 04:51:51

  今天做的一个demo中需要一个下拉选择框,并根据所选择的内容向服务器发送请求。

  首先百度了一下angularjs关于select的使用,一种采用ng-repeat的方式。

<select ng-model="stuTerm">
<option ng-repeat="term in terms" value="{{term.val}}">{{term.text}}</option>
</select>
<p>{{stuTerm.text}}</p>  
<button ng-click="searchScoreY()">查询</button>

  我的想法是根据stuTerm.text向服务器发送请求。

$scope.searchScore = function () {
$http.get("userCenter/js/scoreList.json", {
params: {
XH: window.localStorage.stuId,
XQ: stuTerm.text
}
}).then(function sucCall(res) {
$scope.scList = res.data;
}, function errCAll(res) {
console.log(res);
})
};

  但是这个时候报错了stuTerm.text undefined。我以为是stuTerm.text没有在作用域里面定义的原因,就在一开始定义了$scope.stuTerm = "";但是这时候stuTerm还是等于空。即使select选择了新的东西,<p>{{stuTerm.text}}</p>也更新了。$scope.stuTerm还是空。

  诶?ng-model不是$scope <-> view的双向绑定么,为什么view更新了,$scope却获取不到呢?我觉得应该是ng-repeat会创建一个新的子作用域。而$scope作用域获取不到stuTerm的内容。所以我采用了在searchScore()中传入stuTerm.val进行调用。

<button ng-click="searchScoreY(stuTerm.val)">查询</button>
$scope.searchScore = function (t) {
$http.get("", {
params: {
XH: window.localStorage.stuId,
XQ: t
}
}).then(function sucCall(res) {
$scope.scList = res.data;
}, function errCAll(res) {
console.log(res);
})
};

嗯,这回是对了。上面关于作用域的问题如果有大佬看到,欢迎大佬指点啊!