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