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-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>
...