angularJs的$scope、select控件

迈不过友情╰ 2022-05-25 06:07 215阅读 0赞

最近在学习angularJs对于scope有了新的认识在angularJs中  s c o p e 有 了 新 的 认 识 在 a n g u l a r J s 中 scope就是一个变量声明的符号，scope后的就是一个变量，该变量可以是数组，集合，实体类…，如下代码，我们将查询后的数据response赋值给了  s c o p e 后 的 就 是 一 个 变 量 ， 该 变 量 可 以 是 数 组 ， 集 合 ， 实 体 类 … ， 如 下 代 码 ， 我 们 将 查 询 后 的 数 据 r e s p o n s e 赋 值 给 了 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。就必须添加  s c o p e . t e m p l a t e I d L i s t 。 就 必 须 添 加 scope。否则它们不是同一个变量，例如

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

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