zoukankan      html  css  js  c++  java
  • angularjs-ui插件ui-select和html的select注意事项及区别

    项目中使用了angular-ui里的ui-select指令,地址https://github.com/angular-ui/ui-select

    1. ng-model没有双向数据绑定

    最开始没有看手册,直接仿照之前前辈写的ui-select,比如:

    ...
    <ui-select ng-model="nameOld" theme="bootstrap" style="min- 300px;" name="oldTest" ng-change=change(nameOld)>
        <ui-select-match placeholder="test old example">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="s in oldDatas | propsFilter: {name: $select.search, age: $select.search}">
          <div ng-bind-html="s.name | highlight: $select.search"></div>
        </ui-select-choices>
      </ui-select>
    ...

    这里在ng-change的函数里比如传入形参赋值给$scope.nameOld,才能形成双向数据绑定的效果。

    ...
      $scope.change = function (testOld){
        console.log($scope.nameOld); //undefined
        $scope.nameOld = testOld;
        console.log($scope.nameOld); //hello
      }
    ...  

    后来在手册中发现可以使用selected来实现双向数据绑定

    ...
    <ui-select ng-model="nameOld.selected" theme="bootstrap" style="min- 300px;" name="oldTest" ng-change=change()>
        <ui-select-match placeholder="test old example">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="s in oldDatas | propsFilter: {name: $select.search, age: $select.search}">
          <div ng-bind-html="s.name | highlight: $select.search"></div>
        </ui-select-choices>
      </ui-select>
    ...  

    对应的js中要先声明一个nameOld对象:

    ...
    $scope.nameOld = {};
    
      $scope.change = function (){
        
        console.log($scope.nameOld.selected); //hello
      }
    ...  

    或者使用$parent.xxx,我理解的是ui-select插件创建了一个自己的作用域,需要使用$parent来和父作用域进行绑定;

    ...
    <ui-select ng-model="$parent.nameOld" theme="bootstrap" style="min- 300px;" name="oldTest" ng-change=change()> <ui-select-match placeholder="test old example">{{$select.selected.name}}</ui-select-match> <ui-select-choices repeat="s in oldDatas | propsFilter: {name: $select.search, age: $select.search}"> <div ng-bind-html="s.name | highlight: $select.search"></div> </ui-select-choices> </ui-select> 
    ... 

    这时候js比较简单:

    ...
    $scope.change = function (){ console.log($scope.nameOld); //hello }
    ...

    2. 下拉列表为多属性对象,想绑定的属性和展示的属性不是同一个

     如果是一个对象数组,如下所示,这时候可以选择传入后台的数据是一个属性,还是一个数组元素

    ...
    $scope.testArr = [
            {
                id: 1,
                name: "a"
            },
            {
                id: 2,
                name: "b"
            },
            {
                id: 3,
                name: "c"
            },
        ];
        
        $scope.testChange = function () {
            console.log($scope.testSelect);
            console.log($scope.testSelect2);
        }
    ...

    对应的html如下:上为传入对象、下为传入属性值

    ...
    /*select标签*/
    <select ng-model="testSelect" ng-options="test.name for test in testArr" ng-change="testChange()"></select>
    
    <select ng-model="testSelect2" ng-options="test.name as test.name for test in testArr" ng-change="testChange()"></select>
    
    /*补充:ui-select指令里对象设置*/
    /*单传属性*/
    <ui-select ng-model="$parent.test" theme="bootstrap" style="min- 300px;" name="oldTest" ng-change=testChange()>
        <ui-select-match placeholder="test old example">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="s.name as in testArr| propsFilter: {name: $select.search, age: $select.search}">
          <div ng-bind-html="s.name | highlight: $select.search"></div>
        </ui-select-choices>
      </ui-select> 
    /*传对象*/
    <ui-select ng-model="$parent.test" theme="bootstrap" style="min- 300px;" name="oldTest" ng-change=testChange()>
        <ui-select-match placeholder="test old example">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="s in testArr| propsFilter: {name: $select.search, age: $select.search}">
          <div ng-bind-html="s.name | highlight: $select.search"></div>
        </ui-select-choices>
      </ui-select>
    ...
    

      

  • 相关阅读:
    水晶苍蝇拍:到底怎样把握企业的内在价值? (2010-12-29 15:37:11)
    水晶苍蝇拍:个人投资者必须学会扬长避短 (2010-12-24 12:04:59)
    水晶苍蝇拍:公司研究不要“就事论事”而要“逻辑支点” (2010-12-23 10:58:23)
    水晶苍蝇拍:再高的学识也扛不住“浮躁” (2010-12-03 08:31:33)
    水晶苍蝇拍:人生不同阶段的投资规划 (2010-12-01 08:20:13)
    水晶苍蝇拍:好公司的3个判断维度:成长前景-机会程度-生意属性 (2010-11-29 08:32:30)
    水晶苍蝇拍:我为什么不会重仓买入银行股? (2010-11-28 10:20:00)
    水晶苍蝇拍:投资随谈之:关于股价的“溢价与泡沫” (2010-11-25 08:21:01)
    fgets汉字问题
    sizeof('a')
  • 原文地址:https://www.cnblogs.com/mini-fan/p/7717288.html
Copyright © 2011-2022 走看看