项目中使用了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}}
...