5
Özel başlıklarla ng-table içinde Typeahead ve Tooltip kullanıyorum. Bu, işlevsel olarak çalışır gibi görünüyor ve eğer plunker'a bakarsanız, bir sorunu asla fark etmeyeceksiniz. Ancak, kodu çalıştırdığınızda konsolda görülebilecek birçok hata oluşturur. Hatalar, satırlardan birini farenin üzerine getirdiğimde veya Typeahead'den bir değer seçtiğimde, yükte oluşturulur. Bunu çözmeyi bilen var mı? Şu an üzerinde birkaç gün çalışıyorum ve bir çözüm bulamadım.İçgüdü ve Araç ipucundaki ngTable ile AngularUI, kapsamı undefined Özel başlık uzunluğu ile.Open
İşte hata.
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)
İşte benim denetleyicisi kodu
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();
}
}
});
olduğunu Ve burada plunker hataları görmez ancak ben de bir plunker yarattık 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="[email protected]" 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>
olduğunu. Hatalar kod yerel olarak veya bir web sunucusundan çalıştırıldığında görüntülenir.
Bu sorunla ilgili herhangi bir yardım için şimdiden teşekkür ederiz.