angularjsui插件uiselect和html的select注意事项及区别

HTML文章/教程1年前 (2023)发布勤奋小助

0 0

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

原文链接：https://www.cnblogs.com/mini-fan/p/7717288.html
本文来源爱码网，其版权均为原网址所有与本站无关，文章内容系作者个人观点，不代表本站对观点赞同或支持。如需转载，请注明文章来源。