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