个人中心
gpt4 book ai didi

javascript - Angularjs - 过滤到文本框后我的折叠和展开不起作用

转载 作者：行者123 更新时间：2023-11-30 19:55:03 25 4
gpt4 key购买 nike

我正在使用 angularjs，它有一些来自 ng repeat 的数据和一个用于筛选值的输入文本框，带有 div 的数据是可折叠的，它工作正常，但是当我将任何内容过滤到我的文本框中，并包含与折叠的 div 相关的数据时，该框是已经崩溃了，它没有扩展。这是下面的代码，也在 plunker 中 https://plnkr.co/edit/z4SWv6n1mfH5E4SizOPr?p=preview

HTML

<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<script  src="script.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>
 <body ng-app="app">
    <h1>Dynamic accordion: nested lists with html markup</h1>   
  <div ng-controller="AccordionDemoCtrl">
    <div>
      <input type="text" ng-model="item.value">
      <div  ng-repeat="group in groups | filter:item.value">
        <div class="parents"  ng-click="open($index)"><i ng-class="{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> {{ group.title }}        
        </div>
        {{ group.content }}
        <ul class="childs" ng-show="group.isOpen">
          <li ng-repeat="item in group.list">
            <span ng-bind-html="item"></span>
          </li>
        </ul>        
      </div>
    </div>
  </div>
  </body>

脚本.js

angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
angular.module('app').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.open = function (index) {
    $scope.groups[index].isOpen = !$scope.groups[index].isOpen;
    $scope.closeOthers(index);
  }

  $scope.closeOthers = function (index) {
    for(var i = 0; i  < $scope.groups.length; i++) {
       if (i !== index)
        $scope.groups[i].isOpen = false;
    }
  }
$scope.groups[0].isOpen = true;
  $scope.groups = [
    {
      title: 'title 1',


      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a']
    },
    {
      title: 'title 2',

      list: ['item1b',
        '<b>item2b </b> blah ',
        'item3b'] 
    },
    {
      title: 'title 3',

    },
    {
      title: 'title 4',

    },
    {
      title: 'title 5',

    }
  ];

});

最佳答案

当你使用过滤器时，不要使用索引来更新数组

试试这个，在这里我将项目作为过滤器传递，这样我们就可以知道哪个节点被要求折叠或展开。您也可以使用 id 来过滤数组。

<div>
      <input type="text" ng-model="item.value">
      <div  ng-repeat="group in groups | filter:item.value">
        <div class="parents"  ng-click="open(group)"><i ng-class="{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> {{ group.title }}        
        </div>
        {{ group.content }}
        <ul class="childs" ng-show="group.isOpen">
          <li ng-repeat="item in group.list">
            <span ng-bind-html="item"></span>
          </li>
        </ul>        
      </div>
    </div>

和你的 Controller ，我们正在使用那个项目来过滤掉它。

 $scope.open = function (item) {
    $scope.groups.filter(a=> a ===item).forEach(a=>{
      a.isOpen = !a.isOpen;
    });
    $scope.closeOthers(item);

  }

  $scope.closeOthers = function (item) {
    $scope.groups.filter(a=> a !==item).forEach(a=>{
      a.isOpen = false;
    });
  }

Demo of plunker

关于javascript - Angularjs - 过滤到文本框后我的折叠和展开不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54088341/

25 4 0
文章推荐： javascript - 使用 mutationObserver 观察 html 文本变化
文章推荐： c# - dotnetcore GetTypeInfo() 没有在类型对象的变量上定义？
文章推荐： c# - 如何在 xamarin 表单中动态更改 XAML 中的 ContentPage 标题？
文章推荐： c - void *p = &i 是什么意思？
行者123
个人简介

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

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