angularJs的$scope、select控件

最新推荐文章于 2025-07-01 13:25:01 发布

java_xxxx

最新推荐文章于 2025-07-01 13:25:01 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： $scope select angularJs

本文链接：https://blog.youkuaiyun.com/java_xxxx/article/details/80251687

本文详细介绍了AngularJS中Scope的概念及其作用，通过实例展示了如何利用Scope进行数据绑定及操作，包括变量赋值、select控件绑定及数据循环显示等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习angularJs对于 $scope有了新的认识在angularJs中$ scope就是一个变量声明的符号， $scope后的就是一个变量，该变量可以是数组，集合，实体类… ，如下代码，我们将查询后的数据response赋值给了$ scope.entity那么entity就可以点出我们数据中封装的数据，在前台页面中也可以直接{{$scope.entity.goodsDesc.introduction}}显示出数据

    //查询实体 
    $scope.findOne=function(){     

        goodsService.findOne(id).success(
            function(response){
                $scope.entity= response;   

                // 向富文本编译器中添加文本介绍：文本介绍在tb_goodsDesc表中
                // 但是我们封装的实体中有该类上面已经将返回的结果赋值给变量了entity，我们只要从该变量中取值就可以了
                editor.html($scope.entity.goodsDesc.introduction);
            }
        );          

    }

如下一个select控件为例：

select控件中的ng-model=”entity.typeId”表示将数据绑定到entity.typeId属性上，
options=”item.id as item.name for item in templateIdList”代表每一个的option选项，而templateIdList就是上面我们说的在js代码中声明的变量，也就是option的数据来源（templateIdList中封装的是一个个实体），item自我们自定义的变量名，代表着从该集合中循环拿到的每一个实体，item.id 代表该option的value,而item.name代表该控件的选项显示的名字，如显示手机，但是此时option控件的值为手机对应的id 4

页面代码
<td><select class="form-control" ng-model="entity.typeId" ng-options="item.id as item.name for item in templateIdList"></select></td>

controller.js代码

    $scope.getTemplate=function(){
        typeTemplateService.getTemplateId().success(
                 function(response){
                 // 这里就是将我们查询到的数据赋值给templateIdList这个变量，该变量可以拿出我们在返回数据（response）中的数据，也可在页面中显示({{templateIdList的循环}})
                     $scope.templateIdList=response; 
                 }
          );
    }

service.js代码

    this.getTemplateId=function(){
        return $http.post('../typeTemplate/selectTypeTemplate.do');
    }

数据的循环显示在页面，如果该数据是一个单一的数据，直接{{数据}}即可显示数据
<tr ng-repeat="entity in templateIdList">
                                          <td><input  type="checkbox" ></td>                                          
                                          <td>{{entity.id}}</td>
                                          <td>{{entity.name}}</td>                                      
                                          <td>
                                             {{entity.typeId}}
                                          </td>

如果在input中ng-model=”list”，页面中{{list}},也就是说，输入框中输入什么{{}}中就显示什么数据，又称之为，双向绑定

注意：在js代码中只要用到该 $scope.templateIdList。就必须添加$ scope。否则它们不是同一个变量，例如

一下两个变量不是同一个变量
$scope.templateIdList = response;
templateIdList =response ;

但是在页面取数据的时候（显示数据）的时候就不用在变量前面添加$scope了，直接{{entity.id}}即可，如果循环则 ng-repeat=”entity in templateIdList”