jjzjj

javascript - 试图操纵对象数组

coder 2024-05-09 原文

现在在我的记录中:

14.3、14.2 和 14.1 属于 Id =30 的部分。

我正在努力实现以下目标:

1) 默认情况下,将选择前 2 个 ID。现在如果用户尝试选择属于第 30 部分的 id = 71,则不应允许用户选择 id = 71,因为更高版本的第 30 部分已被选中,即 id=76。

2) 现在如果用户取消选中 id = 77(33) 那么用户应该被允许检查 id=71 因为现在没有选择不同的部分所以用户应该被允许检查所有部分id = 30 但一旦用户选择了不同的部分,则应取消选中下半部分。

我的代码有问题:

1) 当我取消选中 16.1 并尝试选中 14.2 时,我将无法选中它。我应该允许检查 14.2,因为现在这里没有不同的部分。

2) 16.1 和 14.3 默认勾选。现在,当我检查 15.1 然后再次检查 14.1 时,14.3 被取消选中,这是错误的,因为 14.3 在 id=30 部分中最高,所以我不应该检查 14.1。

  var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.myArray = [
                 {
                     "id": 77,
                     "selected": true,
                     "part": 33,
                     "name": "16.1", 
                 },
                {
                    "id": 76,
                    "part": 30,
                    "selected": true,
                    "name": "14.3",
                },
                {
                    "id": 71,
                    "part": 30,
                    "selected": false,
                    "name": "14.2",
                },
                {
                    "id": 70,
                    "part": 31,
                    "selected": false,
                    "name": "15.1",
                },
                {
                    "id": 69,
                    "part": 30,
                    "selected": false,
                    "name": "14.1",
                },
                {
                    "id": 68,
                    "part": 29,
                    "selected": false,
                    "name": "13.1",
                },
                 {
                     "id": 55,
                     "part": 26,
                     "selected": false,
                     "name": "12.1",
                 }
                 ,
                 {
                     "id": 54,
                     "part": 25,
                     "selected": false,
                     "name": "11.2",
                 }
                 ,
                 {
                     "id": 53,
                     "part": 25,
                     "selected": false,
                     "name": "11.1",
                 }
            ];

            $scope.checkItem = function (item) {
                if (item.selected) {
                    var index = $scope.myArray.map(m=>m.id).indexOf(item.id);
                    var previousPart = {};
                    for (var i = index - 1; i >= 0; i--) {
                        if ($scope.myArray[i].selected) {
                            previousPart = $scope.myArray[i];
                            break;
                        }
                    }
                    if (item.part != previousPart.part) {
                        for (var i = 0; i < $scope.myArray.length; i++) {
                            if (($scope.myArray[i].part == item.part && $scope.myArray[i].part != item.part)
                                && $scope.myArray[i].selected) {
                                $scope.myArray[i].selected = false;
                                break;
                            }
                        }
                    }
                    else
                        item.selected = false;



                }
            };
        });
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myCtrl">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
    <div ng-repeat="item in myArray">
        <input ng-model="item.selected" ng-click="checkItem(item)" type="checkbox" />{{ item.name }}
    </div>
</body>
</html>

最佳答案

我会采取不同的方法。将一些逻辑分离到一个服务中可以帮助我保持代码更简洁。将更容易维护、调试和测试。 fiddle

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

 app.controller('myCtrl', function($scope, myCollection) {
   $scope.myArray = myCollection.items;

   // Call function every time an item was checked
   $scope.checkItem = function(item) {

     // Remap collection items before and after 
     myCollection.mapCheckedItems();

     // Do something with the user's interaction only if there are
     // different selected parts by definition
     if (item.selected && myCollection.selectedPartsOnly.length > 1) {

       // Iterate through the selected parts
       myCollection.selectedPartsOnly.map(part => {

         // Get the array of items belonging to the exact part number
         var map = myCollection.selectedPartsMap[part];

         for (var j = map.length - 1; j > 0; j--) {
           // By definition deselect all but the highest version.
           // Happens if different part numbers selected simultaneously
           map[j].selected = false;
         }
       })

     }

     // Recalculate collection map to keep it up to date with the
     // items' array
     myCollection.mapCheckedItems();

   };

 });

 app.service('myCollection', function() {
   // Init the collection object
   var self = {};

   // Function to calculate and map items' dependencies
   self.mapCheckedItems = mapCheckedItems;

   // This holds a list of the selected unique part numbers
   // Used to determine needed action easier. By definition if only 
   // one part number is selected and used to iterate through the map
   self.selectedPartsOnly = [];

   // This is the important dictionary where the part numbers is mapped
   // to its child items. Easy access to items grouped by a part number
   self.selectedPartsMap = {};

   // The actual array definition
   self.items = [{
     "id": 77,
     "selected": true,
     "part": 33,
     "name": "16.1",
   }, {
     "id": 76,
     "part": 30,
     "selected": true,
     "name": "14.3",
   }, {
     "id": 71,
     "part": 30,
     "selected": false,
     "name": "14.2",
   }, {
     "id": 70,
     "part": 31,
     "selected": false,
     "name": "15.1",
   }, {
     "id": 69,
     "part": 30,
     "selected": false,
     "name": "14.1",
   }, {
     "id": 68,
     "part": 29,
     "selected": false,
     "name": "13.1",
   }, {
     "id": 55,
     "part": 26,
     "selected": false,
     "name": "12.1",
   }, {
     "id": 54,
     "part": 25,
     "selected": false,
     "name": "11.2",
   }, {
     "id": 53,
     "part": 25,
     "selected": false,
     "name": "11.1",
   }];

   // Init the helpers once on start. This will be executed only once
   mapCheckedItems();

   // Return the service object to be accessed from the controller
   return self;

   // This function will create and update the objects mapping
   function mapCheckedItems() {

     // Reset the helpers
     self.selectedPartsOnly = [];
     self.selectedPartsMap = {};
     
     // Now we iterate through the selected items.         
     self.items
       .filter(item => item.selected)
       .map(item => {

         // Map every selected item directly to one part number
         mapSelectedParts(item);

         // Determine what part numbers are in use.
         mapSelectedPartsOnly(item.part);
       })
   }

   function mapSelectedPartsOnly(part) {
     if (self.selectedPartsOnly.indexOf(part) == -1)
       self.selectedPartsOnly.push(part);
   }

   function mapSelectedParts(item) {
     if (!self.selectedPartsMap[item.part])
       self.selectedPartsMap[item.part] = [];

     self.selectedPartsMap[item.part].push(item);
   }

 })
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myCtrl">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
    <div ng-repeat="item in myArray">
        <input ng-model="item.selected" ng-click="checkItem(item)" type="checkbox" />{{ item.name }}
    </div>
</body>
</html>

关于javascript - 试图操纵对象数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42955975/

有关javascript - 试图操纵对象数组的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法? - 2

    总的来说,我对ruby​​还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2

    在控制台中反复尝试之后,我想到了这种方法,可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法,但它确实有效。有没有人有更好的建议,或者这是一个很好的方法?#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev

  3. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组,我需要根据最早的事件循环打印。在这种情况下,我需要打印付款和维护日期,如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询,用于查找maintenance和payment项目(非排他性查询),并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  4. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容?我基本上想做类似numbers.slice(0,3)的事情,但要删除切片中的数组项。嗯...嗯,我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组,我们在StackOverflow上找到一

  5. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值,但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗?ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值,你可以这样做:values=@input[x]

  6. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名,我的程序将对其进行迭代。在我之前使用的bash脚本中,我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是,我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  7. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单,其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在?solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  8. Ruby 写入和读取对象到文件 - 2

    好的,所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象?所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是,我该如何再次将这个id变回一个对象?我知道我可以自己挑选信息并制作一个接受该信

  9. ruby - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加?这是我的解决方案,但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

  10. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象,为什么它会起作用? - 2

    如果您尝试在Ruby中的nil对象上调用方法,则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而,有一个tryRails中的方法,如果它被发送到一个nil对象,它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常? 最佳答案 像Ruby中的所有其他对象

随机推荐