angularjs-ui插件ui-select和html的select注意事项及区别

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

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

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

...

    {{$select.selected.name}}
    
      
...

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

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

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

...

    {{$select.selected.name}}
    
      
...  

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

...
$scope.nameOld = {};

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

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

...
{{$select.selected.name}}
 
... 

这时候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标签*/




/*补充:ui-select指令里对象设置*/
/*单传属性*/

    {{$select.selected.name}}
    
      
  /*传对象*/ {{$select.selected.name}}
...

  

 

转载于:https://www.cnblogs.com/mini-fan/p/7717288.html

你可能感兴趣的:(angularjs-ui插件ui-select和html的select注意事项及区别)