判断字符串是否存在于数组中，如果存在则删除该字符串所在的数组项

发布于 2022-09-06 01:11:10 字数 820 浏览 13 评论 0

图片描述

如图所示，点击珍珠颜色、配件材质、尺寸后会生成如下图的数组格式，现在我需要点击已选中的项判断是否存在数组中，如果存在则删除该项，否则则添加该项；

图片描述

以下是我添加的方法：

for (var i = 0; i < $scope.attrList.length; i++) {
      if ($scope.attrList[i].id === id) {
        $scope.tempArray[i].push(name);
        $scope.group = doExchange($scope.tempArray);
      }
    }

其中$scope.attrList是从接口拿到的属性数据，渲染后就是第一张图的样子，doExchange就是把原本[['白色'],['黄金'],['9#']]这样的格式转换成["白色,黄金,9#"]这样的格式

**代码链接：
链接: https://pan.baidu.com/s/1kVzfRdP 密码: jneb**

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青朷 2022-09-13 01:11:10

可以通过js数组的indexOf方法拿到选中项生成的字符串是否已经在当前数组中(>-1则存在，==-1则不存在)，然后通过splice方法删除这项，或是将新生成的字符串push入数组。

补充：
你这里逻辑并不对。是你第二个图里面的数组为A的话，

angular.forEach($scope.group,function(item,index) {
    var tindex = A.indexOf(item);
    if (tindex > -1) {
        $scope.group.splice(tindex,1);
    } else {
        console.log('不存在');
    }
})

回复收藏 0

是伱的 2022-09-13 01:11:10

我看了你网盘的代码，我有以下问题不是特别明白：

你这个需求的表单控件用了多选框，是有什么特殊原因，颜色、材质、尺寸这些零件属性对于零件本身都具有唯一性，不应该用单选框更好吗？
你md-checkbox中没有使用ng-model绑定数据模型，这是为什么呢？如果绑定的话，选中数据模型和视图模型的同步逻辑并不需要你通过ng-click来自己实现，你只需要提供类似doExchange这样的数据格式化方法即可
继续第一点说，如果你确实是想用多选框，那么ng-value的使用方法是错误的，不应该使用ng-value指令来改变$model的值，而应该使用ng-true-value和ng-false-value

以上

回复收藏 0

栖迟 2022-09-13 01:11:10

有点不怎么明白你的需求，感觉就像是选择手机属性：白色、玫瑰金、9#，也该是单独的一组。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>angularJs</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <style>
  .container{margin-top:100px;}
  .checkbox-dg label{position:relative;display:inline-block;margin-right:30px;padding:15px;border:1px solid #ccc;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);vertical-align:middle;cursor:pointer}
  .checkbox-dg input[type=radio]{margin:0;opacity:0;display: none}
  .checkbox-dg input[type=radio]:checked+label{border:1px solid #6cbbee;background-color: #ddd}
  .round label{border-radius:50%}
  </style>
  <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div class="container" ng-controller="myCtrl">
  <div class="row form-group" ng-repeat="item in data track by $index">
    <div class="row form-group">{{item.name}}：</div>
    <div class="row form-group">
      <ul class="nav navbar-nav navbar-left">
        <li ng-repeat="subItem in item.itemAttributes track by $index">
          <div class="checkbox-dg round">
            <input id="checkbox{{subItem.id}}" type="radio" name="{{item.id}}" value="{{subItem.value}}" ng-model="item.selected" ng-change="getFinalValue()">
            <label for="checkbox{{subItem.id}}">{{subItem.value}}</label>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="row form-group">选中：{{group}}</div>
</div>

<script>
  angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.data = [
      {
        "id": 1,
        "name": "珍珠颜色",
        "itemAttributes": [
          {
            "id": 1,
            "value": "白色",
            "createTime": "2017-08-31 00:00:01"
          },
          {
            "id": 2,
            "value": "粉色",
            "createTime": "2017-08-31 00:00:02"
          },
          {
            "id": 3,
            "value": "黑色",
            "createTime": "2017-08-31 00:00:03"
          },
          {
            "id": 4,
            "value": "紫色",
            "createTime": "2017-08-31 00:00:04"
          },
          {
            "id": 5,
            "value": "金色",
            "createTime": "2017-08-31 00:00:05"
          }
        ]
      },
      {
        "id": 2,
        "name": "配件材质",
        "itemAttributes": [
          {
            "id": 6,
            "value": "黄金",
            "createTime": "2017-08-31 00:00:06"
          },
          {
            "id": 7,
            "value": "玫瑰金",
            "createTime": "2017-08-31 00:00:07"
          },
          {
            "id": 8,
            "value": "铂金",
            "createTime": "2017-08-31 00:00:08"
          },
          {
            "id": 9,
            "value": "白银",
            "createTime": "2017-08-31 00:00:09"
          },
          {
            "id": 10,
            "value": "无配件",
            "createTime": "2017-08-31 00:00:10"
          }
        ]
      },
      {
        "id": 3,
        "name": "尺寸",
        "itemAttributes": [
          {
            "id": 11,
            "value": "9#",
            "createTime": "2017-08-31 00:00:11"
          },
          {
            "id": 12,
            "value": "10#",
            "createTime": "2017-08-31 00:00:12"
          },
          {
            "id": 13,
            "value": "11#",
            "createTime": "2017-08-31 00:00:13"
          },
          {
            "id": 14,
            "value": "12#",
            "createTime": "2017-08-31 00:00:14"
          },
          {
            "id": 15,
            "value": "13#",
            "createTime": "2017-08-31 00:00:15"
          }
        ]
      }
    ];

    $scope.getFinalValue= function (argument) {
      $scope.group=[];
      angular.forEach($scope.data, function(item, index) {
        if(item.selected){
          $scope.group.push(item.selected);
        }
      });
    }

  });
</script>
</body>
</html>

回复收藏 0

~没有更多了~