个人中心
gpt4 book ai didi

angularjs - 在选择框之间来回移动时对列表框项目进行排序(使用 ng-options)

转载 作者：行者123 更新时间：2023-12-03 04:34:22 25 4
gpt4 key购买 nike

我创建了 2 个列表框，其中一个左侧有 4 个项目(例如 )，右侧另一个是空的。我在它们之间有 2 个按钮，用于从左到右移动内容，反之亦然。

我已经在 Angular js 中实现了这个。

现在，问题是，每次我在框之间来回移动元素时，它们总是会附加到末尾，而我希望它们保持排序顺序(按字母顺序)，即使项目在框之间移动时也是如此。例如。我左边有蓝、绿、红、黄四种颜色。它们现在按字母顺序排列。我向左移动红色。然后，当我移回右侧时，它会添加到列表的末尾，即列表现在是蓝色、绿色、黄色、红色，而预期结果是蓝色、绿色、红色、黄色。我已经在使用“orderBy”，它会在数据第一次显示在用户界面上时对数据进行排序，但来回移动项目不会保留排序顺序。

有没有办法在 Angular 中做到这一点？这是我的笨蛋

http://plnkr.co/edit/0KV9raBlgSuNT3mwKfWp?p=preview

我的指令中的代码如下:

app.directive('dualbox', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            title: '@',
            leftboxtitle: '@',
            rightboxtitle: '@',
            colors: '=ngModel'
        },
        templateUrl: 'dualboxTemplate.html',
        link: function (scope, element, attrs) {
            $('#add').click(function () {
                var selected = $('#select1 option:selected');
                angular.forEach(selected, function (value, key) {
                    scope.colors.destinationColors.push(value.text);
                });
                return !selected.remove().appendTo('#select2');
            });
            $('#remove').click(function () {
                var selected = $('#select2 option:selected');
                !selected.remove().appendTo('#select1');
                var currentSelect2List = $('#select2 option');
                scope.colors.oldDestinationColors = scope.colors.destinationColors;
                scope.colors.destinationColors = [];
                angular.forEach(currentSelect2List, function (value, key) {
                    scope.colors.destinationColors.push(value.text);
                });

                return
            });
            $("#selectAll").click(function () {
                $('select option').attr("selected", "selected");
            });
        }

    }

});

html模板中的代码是:

 <table cellpadding="0" cellspacing="0" border="0" height="144px;">
      <tbody>
        <tr>
          <td>
            <select name="disable" multiple="" id="select1" class="select1 tall" ng-model="selectedColor" ng-options="c.name for c in colors.sourceColors | orderBy:'name'"></select>
          </td>
          <td valign="top">

            <a  href="#" id="add">
              <img src="move_right.png" class="remove" />
            </a>
            <br />
            <a  href="#" id="remove">
              <img src="move_left.png" class="add" />
            </a>
          </td>
          <td>
            <select name="enable" id="select2" class="select2 tall" multiple="" size="2" ></select>
          </td>
        </tr>
        <tr>
          <td colspan="3">
            <div class="mar20Top mar10Btm flRt"></div>
          </td>
        </tr>
      </tbody>
    </table>

下面是我的 Controller 代码:

var app = angular.module('app', []);

app.controller('main', ['$scope',function($scope){
    $scope.colors = {sourceColors:[
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}

  ], destinationColors:[
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}

  ]};

  $scope.dummy=[{name:'rupa', age :"2"},
  {name:'sdfas', age :"2"},
  {name:'ruasdfapa', age :"2"},
  {name:'rusdfaspa', age :"2"}]

   $scope.items = [
    {"id":0,"name":"OG"},
    {"id":1,"name":"OS"},
    {"id":2,"name":"PG"},
    {"id":3,"name":"PS"}
  ];
  $scope.selectedItem=$scope.items[0];

}])

下面是我使用该指令的 html 代码:

<!DOCTYPE html>
<html ng-app="app">

  <head>

    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
     <script data-require="angular.js@*" data-semver="1.2.1" src="http://code.angularjs.org/1.2.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="myController.js"></script>
    <script src="customDirective.js"></script>
  </head>

  <body ng-controller="main">
    <div>
    Listbox Demo: 
                 <dualbox title="ABC Listbox Directive" leftboxtitle="Disabled Profiles" rightboxtitle="Enabled Profiles" ng-model="colors"></dualbox>




                         lasdjflasdjfla
                         asdfjlasjl

                    <select novalidate="" class="select1 tall" ng-options="c.name for c in dummy"></select>
      <select novalidate="" ng-model="selectedItem" ng-options="item.name for item in items"></select>
    </div>
  </body>

</html>

感谢您的见解..对我的添加和删除功能进行了更改，这成功了。基本上，解决方案不仅仅是更新双盒......而是更新底层数据。在此发布修复程序，以便遇到相同问题的任何人都可以使用它。 

 scope.add = function() {
            var selectedObjects = new Array();
            $('#select1 option:selected').each(function(){
                var selectedObject = scope.data.sourceColors[$(this).val()];
                selectedObjects.push(selectedObject);
                scope.data.destinationColors.push(selectedObject);
            });

            for(var i in selectedObjects){
                var idx = scope.data.sourceColors.indexOf(selectedObjects[i]);
                scope.data.sourceColors.splice(idx,1);
            }

        }

        //remove function
        scope.remove = function() {
            var selectedObjects = new Array();
            $('#select2 option:selected').each(function(){
                var selectedObject = scope.data.destinationColors[$(this).val()];
                selectedObjects.push(selectedObject);
                scope.data.sourceColors.push(selectedObject);
            });

            for(var i in selectedObjects){
                var idx = scope.data.destinationColors.indexOf(selectedObjects[i]);
                scope.data.destinationColors.splice(idx,1);
            }
        }

最佳答案

您可以像这样转换您的 ng-options 以应用排序/过滤:

ng-options="c as c.name for c in colors.sourceColors | orderBy:'name'"

当然，对两个选择元素都执行此操作，以便两个列表都以正确的顺序显示元素。

因为 AngularJS 的基本行为是“我的 View 观察我的模型数据”，所以只需删除/添加元素到你的模型中，你的 View 就应该完成剩下的工作。至少你应该以这种方式设计你的指令/应用程序。

关于angularjs - 在选择框之间来回移动时对列表框项目进行排序(使用 ng-options)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20133958/

25 4 0
文章推荐： .htaccess - HTACCESS 中带有字符 % 的 URL 重定向
文章推荐： authentication - 如何在 Azure Multi-Tenancy 应用程序中停止同意
文章推荐： azure - 使用 Capistrano 通过 SSH 访问 Azure for Rails 部署
文章推荐： asp.net - gridview + objectdatasource select方法调用两次
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com