javascript - AngularUI with Typeahead and Tooltip in ngTable with Custom header length undefined at scope.isOpen -
i'm using typeahead , tooltip inside ng-table custom headers. seems work functionally, , if @ plunker you'd never notice issue. but, when run code generates lot of errors can seen in console. errors generated on load, whenever mouse on 1 of rows, or when select value typeahead. know how solve this? i've been working on couple days , haven't found solution.
here error.
typeerror: cannot read property 'length' of undefined @ scope.scope.isopen (http://localhost:61814/app/scripts/ui-bootstrap-tpls-0.11.0.js:3756:31) @ $parsefunctioncall (http://localhost:61814/app/scripts/angular.js:11351:18) @ scope.$eval (http://localhost:61814/app/scripts/angular.js:13202:28) @ object.watchexpression (<anonymous>:763:37) @ scope.$digest (http://localhost:61814/app/scripts/angular.js:13032:40) @ scope.$delegate.__proto__.$digest (<anonymous>:844:31) @ scope.$apply (http://localhost:61814/app/scripts/angular.js:13306:24) @ scope.$delegate.__proto__.$apply (<anonymous>:855:30) @ done (http://localhost:61814/app/scripts/angular.js:8797:47) @ completerequest (http://localhost:61814/app/scripts/angular.js:9012:7) here controller code
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 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(); } } }); and here 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>* clear name filter delete entered text , press 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 character.name 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> i have created plunker won't see errors on plunker. errors appear when code run locally or web server.
thanks in advance problem.
seems defect in typeahead.
workaround this: - initialized $scope.matches typeahead should have done.
$scope.data = {}; $scope.data.selected = ""; $scope.matches = [];//workaround working plunker:
Comments
Post a Comment