今天做的一个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);
})
};
嗯,这回是对了。上面关于作用域的问题如果有大佬看到,欢迎大佬指点啊!