个人中心
gpt4 book ai didi

javascript - ngTable 中带有 Typeahead 和工具提示的 AngularUI，在 scope.isOpen 处未定义自定义 header 长度

转载 作者：搜寻专家 更新时间：2023-11-01 04:31:35 25 4
gpt4 key购买 nike

我在带有自定义 header 的 ng-table 中使用 Typeahead 和 Tooltip。这似乎在功能上有效，如果您查看 plunker，您将永远不会注意到问题。但是，当您运行代码时，它会生成很多错误，这些错误可以在控制台中看到。每当我将鼠标悬停在其中一行上，或者当我从 Typeahead 中选择一个值时，就会在加载时生成错误。有谁知道如何解决这个问题？我已经为此工作了几天，但我还没有找到解决方案。

这里是错误。

TypeError: Cannot read property 'length' of undefined
at Scope.scope.isOpen (http://localhost:61814/app/Scripts/ui-bootstrap-tpls-0.11.0.js:3756:31)
at $parseFunctionCall (http://localhost:61814/app/Scripts/angular.js:11351:18)
at Scope.$eval (http://localhost:61814/app/Scripts/angular.js:13202:28)
at Object.watchExpression (<anonymous>:763:37)
at Scope.$digest (http://localhost:61814/app/Scripts/angular.js:13032:40)
at Scope.$delegate.__proto__.$digest (<anonymous>:844:31)
at Scope.$apply (http://localhost:61814/app/Scripts/angular.js:13306:24)
at Scope.$delegate.__proto__.$apply (<anonymous>:855:30)
at done (http://localhost:61814/app/Scripts/angular.js:8797:47)
at completeRequest (http://localhost:61814/app/Scripts/angular.js:9012:7)

这是我的 Controller 代码

var app = angular.module('plunker', ['ui.bootstrap','ngTable' ]);

app.controller('MainCtrl', function($scope, $filter, ngTableParams) {
$scope.name = 'World';


$scope.testFilterText = "";

$scope.data = {};
$scope.data.selected = "";

$scope.testData = [{Name:"Han Solo",Role:"Smuggler"},{Name:"Luke Skywalker",Role:"Moisture Farmer"},{Name:"Princess Leia",Role:"Princess"},{Name:"Obie Wan Kenobi",Role:"Jedi Master"},{Name:"Chewbacca",Role:"Smuggler"},{Name:"Boba Fett",Role:"Bounty Hunter"},{Name:"Darth Vader",Role:"Sith Lord"},{Name:"Wedge Antilles",Role:"Pilot"},{Name:"C3PO",Role:"Protocol Droid"},{Name:"R2D2",Role:"Astromech Droid"},{Name:"Jabba The Hutt",Role:"Gangster"},{Name:"Greedo",Role:"Bounty Hunter"},{Name:"Darth Bane",Role:"Sith Lord"},{Name:"Yoda",Role:"Jedi Master"},{Name:"Mace Windu",Role:"Jedi Master"},{Name:"Commander Cody",Role:"Clone Trooper"},{Name:"Lando Calrissian",Role:"Entrepreneur"},{Name:"Mara Jade",Role:"Jedi"},{Name:"Lando Calrissian",Role:"Entrepreneur"},{Name:"Jango Fett",Role:"Bounty Hunter"},{Name:"Jar Jar Binks",Role:"Doofus"},{Name:"Darth Maul",Role:"Sith"},{Name:"Emporer Palpatine",Role:"Sith Lord"},{Name:"Qui-Gon Jinn",Role:"Jedi Master"},{Name:"Grand Moff Tarkin",Role:"Grand Moff"},{Name:"Lando Calrissian",Role:"Entrepreneur"},{Name:"Admiral Akbar",Role:"Admiral"},{Name:"IG-88",Role:"Bounty Hunter"}];


$scope.charactersTable = new ngTableParams({
  page:1,
  count: 10
},{
  counts: [10,20,50,100],
  total: $scope.testData.length,
  getData: function($defer, params) {
    var filteredData = params.filter() ?
    $filter('filter')($scope.testData, { 'Name': $scope.data.selected.Name }) :
    $scope.testData;
    var orderedData = params.sorting() ?
    $filter('orderBy')(filteredData, params.orderBy()) :
    $scope.testData;

    $scope.myOrderedData = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
    params.total(orderedData.length);
    $defer.resolve($scope.myOrderedData);
  }
});

$scope.$watch("data.selected.Name", function (newValue, oldValue) {
            if (newValue !== oldValue) {
                $timeout(function () {
                    $scope.charactersTable.reload();
                }, 100);
            }
        });


$scope.selectMatch = function (selection) {
    $scope.data.selected = selection;
    $scope.charactersTable.reload();
};

$scope.clearNameFilterText = function( evt ){
if (evt.keyCode === 13 && angular.isUndefined($scope.data.selected.Name) )  {
  $scope.charactersTable.reload();
}
}

});

这是html

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

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>

<script src="ng-table.js"></script>
<script src="app.js"></script>
<script src="ui-bootstrap-tpls-0.11.0.js"></script>
</head>

<body ng-controller="MainCtrl">
<div class="container">
<div class="jumbotron">
<div class="tab-content">
<div class="tab-pane active">
<div>* To clear name filter delete previously entered text and press the Enter key.</div>
<table ng-table="charactersTable" class="table table-hover table-condensed table-striped">
<thead>
  <tr class="main">
    <th class="sort" ng-click="charactersTable.sorting({'Name' : charactersTable.isSortBy('Name', 'asc') ? 'desc' : 'asc'})">Character Name <span class="glyphicon glyphicon-sort"></span></th>
    <th class="sort" ng-click="charactersTable.sorting({'Role' : charactersTable.isSortBy('Role', 'asc') ? 'desc' : 'asc'})">Role <span class="glyphicon glyphicon-sort"></span></th>
  </tr>
  <tr class="filters">
    <th class="input">
    <div class="btn-group">
      <input type="text" class="form-control passive" ng-model="data.selected" 
      typeahead="characterName as character.Name for character in testData | filter:$viewValue | limitTo:8" 
      typeahead-on-select="selectMatch($item)" ng-keypress="clearNameFilterText($event)"
      placeholder="Enter name">
    </div>
    </th>
    <th class="dropdown">
    </th>
  </tr>
</thead>
<tbody>
  <tr ng-repeat="item in $data">
    <td><a ng-click="" class="" tooltip-placement="right" tooltip-popup-delay="500" tooltip-html-unsafe='<div class="tooltip-inner vertical"><table><tr><td>Name</td><td>{{item.Name}}</td></tr><tr><td>Role</td><td>{{item.Role}}</td></tr></table></div>'>{{item.Name}}</a></td>
    <td>{{item.Role}}</td>
  </tr>
  </tbody>
</table>
</div>
</div>
</div>
</div>
</body>

</html>

我还创建了一个 plunker但是你不会在 plunker 上看到错误。当代码在本地或从 Web 服务器运行时，会出现错误。

在此先感谢您对此问题的任何帮助。

最佳答案

似乎是 typeahead 的缺陷。

解决方法是:- 初始化 $scope.matches，typeahead 本身应该完成。

  $scope.data = {};
  $scope.data.selected = "";
  $scope.matches = [];//workaround

工作 plunker :

关于javascript - ngTable 中带有 Typeahead 和工具提示的 AngularUI，在 scope.isOpen 处未定义自定义 header 长度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25751800/

25 4 0
文章推荐： ios - 是否可以在 UIAlertView 上垂直放置 2 个按钮？
文章推荐： javascript - Highstock inputDateParser 触发三次
文章推荐： javascript - 单击按钮时触发 ctrl+r、ctrl+a、ctrl+q 事件
文章推荐： javascript - 表单选择器不适用于动态标记
搜寻专家
个人简介

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

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