angularJs的$scope、select控件

最近在学习angularJs对于 scopeangularJs s c o p e 有 了 新 的 认 识 在 a n g u l a r J s 中 scope就是一个变量声明的符号, scoperesponse 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”

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值