angularjs select标签中参数的传递

Posted 2020-10-02 林灬

　　今天做的一个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);
    })
};

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