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