I am getting the following error while i have no data using ng-repeat in Angular.js
Error:
Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.6/ngRepeat/dupes?p0=user%20in%20objHodUserData&p1=string%3Al&p2=l
at Error (native)
at http://oditek.in/Gofasto/js/angularjs.js:6:416
at http://oditek.in/Gofasto/js/angularjs.js:279:39
at Object.fn (http://oditek.in/Gofasto/js/angularjs.js:129:128)
at n.$digest (http://oditek.in/Gofasto/js/angularjs.js:130:206)
at n.$apply (http://oditek.in/Gofasto/js/angularjs.js:133:236)
at g (http://oditek.in/Gofasto/js/angularjs.js:87:376)
at K (http://oditek.in/Gofasto/js/angularjs.js:91:448)
at XMLHttpRequest.z.onload (http://oditek.in/Gofasto/js/angularjs.js:92:462)
I am explaining my code below.
<tbody id="detailsstockid">
<tr ng-repeat="user in objHodUserData ">
<td>{{$index+1}}</td>
<td>{{user.user_name}}</td>
<td>{{user.email}}</td>
<td>{{user.mob_no}}</td>
<td>{{user.login_name}}</td>
<td ng-if="user.user_status==1">Enable</td>
<td ng-if="user.user_status==0">Disable</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editUserData(user.user_id)" >
</a>
</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-red' value='Delete' ng-click="deleteUserData(user.user_id);" >
</a>
</td>
</tr>
</tbody>
When the object objHodUserData has no data these type error is coming.I tried to resolve this by using track by $index. By using this error has gone but 4 blank rows are generating.Here i need when there is no data present no rows will generate without any error and when data will be there it will display.Please help me to resolve this error.
I had the same problem, and I solved it by wrapping all the <tbody> within a <div> element.
and inserting ng-show in this div element like that
<div ng-show="hasElements()">
and in your controller you have a $scope function to check if there is elements in the object like that:
$scope.hasElements = function(){
return objHodUserData.length ===0;
}
and that should work.
let me if it solved your problem.
Cheers.
Try using ng-if along with ng-repeat.It should be ng-if="objHodUserData.length !=0"
If you don't mind using lodash, then this is a handy utility library for your javascript, which can help with tasks like this.
var objHodUserDataWithoutBlanks = _.filter(objHodUserData, function(n) {
return n.user_name != "";
});
The above will filter out entries that have a blank username. Then your ng-repeat can instead repeat over this object without blanks: objHodUserDataWithoutBlanks.
Edit: Alternate method using only angularjs:
Add an angular filter:
myApp.filter('nonBlankOnly', function() {
return function( items) {
var filtered = [];
angular.forEach(items, function(item) {
if(item.user_name != "") {
filtered.push(item);
}
});
return filtered;
};
});
Then apply the filter in your controller:
function myCtrl($scope, $filter)
{
$scope.objHodUserDataWithoutBlanks = $filter('nonBlankOnly')(objHodUserData);
}
And repeat through filtered items:
<tr ng-repeat="user in objHodUserDataWithoutBlanks">
Maybe you can use de ng-show to check if there is an existing user, something like:
<tr ng-repeat="user in objHodUserData ">
<td ng-show="user">{{$index+1}}</td>
<td ng-show="user">{{user.user_name}}</td>
<td ng-show="user">{{user.email}}</td>
<td ng-show="user">{{user.mob_no}}</td>
<td ng-show="user">{{user.login_name}}</td>
or if you prefer to hide the entire row, put the ng-show on the <tr> element.
<tbody id="detailsstockid">
<tr ng-repeat="user in objHodUserData " ng-show="user">
<td>{{$index+1}}</td>
<td>{{user.user_name}}</td>
<td>{{user.email}}</td>
<td>{{user.mob_no}}</td>
<td>{{user.login_name}}</td>
<td ng-if="user.user_status==1">Enable</td>
<td ng-if="user.user_status==0">Disable</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editUserData(user.user_id)" >
</a>
</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-red' value='Delete' ng-click="deleteUserData(user.user_id);" >
</a>
</td>
</tr>
</tbody>
Related
I am trying to uniqeley identify buttons in a tablerow, so I can change the style if one of them is clicked. Here is the table i am working on:
And here is the code:
<table class="table">
<thead>
<tr>
<th>Allergi navn</th>
<th>Allergi verdi</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="items in $ctrl.allergen">
<td>
<b>
{{items.Allergennavn}}
</b>
</td>
<td id="{{$index}}">
<button
id="tableButton"
type="button"
class="btn-grey"
ng-repeat="item in $ctrl.allergenVerdiType"
ng-click="$ctrl.allergiAssigned($index, items, item)"
>
<b>
{{item.Allergenverdi}}
</b>
</button>
<hr>
</td>
</tr>
</tbody>
</table>
And js:
ctrl.allergiAssigned = function($index, itemAllergen, itemAllergenType){
var index = $('button').index(this);
$(index, '#tableButton').css("background-color", "green");
}
I have tried several approaches to reference the specific button-element, using this, index, etc. I also need to verfiy that for every row, there is only one of the buttons that are selected.
I also tried to pass {{$index}} to get a unique identifier for the row, but jquery doesn't support the syntax.
UPDATE based on answers:
<table class="table">
<thead>
<tr>
<th>Allergi navn</th>
<th>Allergi verdi</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="items in $ctrl.allergen">
<td>
<b>
{{items.Allergennavn}}
</b>
</td>
<td id="{{$index}}">
<button id="tableButton" type="button"
class="btn-grey" ng-class="{activeBtn: item.active == true}"
ng-repeat="item in $ctrl.allergenVerdiType"
ng-click="$ctrl.select(items.type, item)">
{{item.AllergenverditypeKode}}</button>
<hr>
</td>
</tr>
</tbody>
</table>
ctrl.select = function(items, index) {
angular.forEach(items, function(item){
item.active=false;
});
index.active = true;
};
index returns undefined
You can change the CSS class based on the user action by using ng-class directive.
details
Code will be like that.
In CSS class :.activeButton:{background-color", "green"}
In button ng-click function : buttonClicked[$index]=true;
In Html button input:
..... ng-class="{'btn-grey':'btn-grey',
'activeButton':<add your condition like 'buttonClicked[$index]'>}"
To uniquely identify an element in nested ng-repeat, you can assign a unique Id to it by combining the $index from the parent loop and from the child loop as :
id="tableButton_{{$parent.$index}}_{{$index}}"
Now, pass the parent index and the child index to the event, fetch the element and change its css:
ng-click="assigned($parent.$index, $index)"
Below is a snippet of a sample data:
angular.module("app", []).controller("ctrl", function($scope) {
$scope.items = ["Item A", "Item B"];
$scope.buttonTypes = ["Btn1", "Btn2", "Btn3", "Btn4"];
$scope.assigned = function(parentIndex, childIndex) {
//Reset all buttons for one row
var parentBtns = "#" + parentIndex + " :button";
$(parentBtns).css("background", "transparent");
//Change the selected button css
var btn = "#tableButton_" + parentIndex + "_" + childIndex;
$(btn).css("background", "green");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<table class="table">
<thead>
<tr>
<th>Allergi navn</th>
<th>Allergi verdi</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>
<b>{{item}}</b>
</td>
<td id="{{$index}}">
<button id="tableButton_{{$parent.$index}}_{{$index}}" type="button" class="btn-grey" ng-repeat="type in buttonTypes" ng-click="assigned($parent.$index, $index)">
<b>{{type}}</b>
</button>
<hr>
</td>
</tr>
</tbody>
</table>
</body>
You can try something like the below code, also you check you given working plunker example.
Template:
<button id="tableButton" type="button" class="defaultBtn" ng-class="{activeBtn: item.active}" ng-repeat="item in items.type" ng-click="select(items.type, item)">{{item.value}}</button>
Controller:
$scope.select= function(items, index) {
// You can remove this loop part if you don't want to reset your selection..
angular.forEach(items, function(item){
item.active=false;
});
index.active = true;
};
I am using dir-paginate library to paginate my data on the page. The issue I am having is when I am adding a new object to the list and viewing this on the page instantly. On the controller side every thing seems to work just alright.
Here is my controller
/**
* Array of all the items
*/
$scope.allItems = [];
$scope.postResource = function() {
ProjectsFactory.save($scope.newProject)
.success(function(data) {
$scope.allItems.push(data);
console.log($scope.allItems);
$scope.newProject = ''
ToastService.show('Added successfully!');
})
.error(function(data) {
sweetAlert("Oops...", "Something went wrong!", "error");
console.log(data);
});
}
Notice the log I am doing right there. On the console page I can see the new object is being added to the rest of the objects. I believe the issue is occurring on the view side which looks just like this.
<table class="table table-bordered table-hover table-condensed bg-white" st-table="rowCollectionBasic">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="item in allItems | filter: search.query | itemsPerPage : itemPerPage" total-items="totalProjects" current-page="currentPage">
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td style="width:150px">
<button class="btn btn-info btn-sm" ng-click="showEditDialog($event, item)">
<i class="glyphicon glyphicon-edit"></i>
</button>
<button class="btn btn-danger btn-sm" ng-click="deleteResource(item, $index)">
<i class="glyphicon glyphicon-trash"></i>
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="20" class="text-center">
<dir-pagination-controls on-page-change="pageChanged(newPageNumber)" boundary-links="true"></dir-pagination-controls>
<md-progress-circular md-mode="indeterminate" ng-if="AjaxInProgress"></md-progress-circular>
</td>
</tr>
</tfoot>
To see the new created object on the page, I need to either refresh the page or click somewhere else and return to the same page again.
Someone has an idea what I am doing wrong?
Update #1
The project service has $http
// save a new resource
save: function(data) {
return $http({
url: $rootScope.baseUrl + 'projects',
method: 'POST',
data: data
});
},
Thanks!
I want to create a table which contains dynamic Content. When clicking on an element, the Details should Show up in the next line. So i creatied the following:
<table ng-controller="TestCtrl">
<tr ng-repeat-start="word in ['A', 'B', 'C']">
<td><!-- Some Information, Image etc --></td>
<td ng-click="showDetails(word)">{{word}}</td>
</tr>
<!-- This is only visible if necessary -->
<tr ng-repeat-end ng-show="currentDetail == word">
<td colspan="2" ng-attr-id="{{'Details' + word}}"></td>
</tr>
</table>
And I have the following js code:
angular.module('maApp', []).controller("TestCtrl", function($scope, $document, $compile){
$scope.showDetails = function(word){
var target = $document.find("Details" + word);
//I checked it - target is NOT null here
//target.html("<div>Test</div>");
//target.append("<div>Test</div>");
var el = $compile("<div>Test</div>")($scope);
target.append(el);
//Show tr
$scope.currentDetail = word;
};
});
I also tried the commented Solutions above but nothing of it works (The tr is showing up however). I guess there is something wrong with $document.find("Details" + word) but I don't know what.
Ultimately I want to add an <iframe> and the source would contain the word.
Does anybody see what I'm doing wrong here?
No need for weird non-angulary DOM manipulation: All you need is this.
HTML:
<table ng-controller="TestCtrl">
<tr ng-repeat-start="word in ['A', 'B', 'C']">
<td><!-- Some Information, Image etc --></td>
<td ng-click="showDetails(word)">{{word}}</td>
</tr>
<tr ng-show="currentDetail==word" ng-repeat-end>
<td colspan="2">Details {{word}}</td>
</tr>
</table>
JS:
angular.module('myApp', []).controller("TestCtrl", function($scope, $document, $compile){
$scope.showDetails = function(word) {
$scope.currentDetail = word;
};
});
http://jsfiddle.net/HB7LU/20074/
$document.find in jqlite is limited to tag name only. You have to add jquery for anything more.
See what is suported in the docs.
you have all you need built into angular already, you don't need the Javascript at all.
see this plunker example
<table style="width:100%;">
<thead style="background-color: lightgray;">
<tr>
<td style="width: 30px;"></td>
<td>
Name
</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="person in people">
<td>
<button ng-if="person.expanded" ng-click="person.expanded = false">-</button>
<button ng-if="!person.expanded" ng-click="person.expanded = true">+</button>
</td>
<td>{{person.name}}</td>
<td>{{person.gender}}</td>
</tr>
<tr ng-if="person.expanded" ng-repeat-end="">
<td colspan="3">{{person.details}}</td>
</tr>
</tbody>
</table>
if my HTML is like this :
<tbody id="hasil-pencarian">
<tr>
<td align="center">1</td>
<td>TMS/IT/06/001</td>
<td>Erika Julia Widiyanti</td>
<td>Marketing</td>
<td>14-06-2015 13:59</td>
<td>14-06-2015 14:00</td>
<td>Erika test 1</td>
<td id="action" class="center" width="10px">
<a class="btn btn-success">
</td>
</tr>
</tbody>
I got all the html above like this :
var result = $("#hasil-pencarian").html();
But, How can I get all the HTML without the <td> with id='action' ?
Little confused. Any help will be so appreciated.
I think you could create clone then remove the element then get the content like
var result = $("#hasil-pencarian").clone().find('#action').remove().end().html();
I am trying to show a more detailed summary of a row when a user clicks on the "+" icon on the row. I got it to work when I used an tag but when I modified it to an tag, the javascript would not kick in.
Here's what I have:
<table class="table" ng-repeat="lineItem in order.OrderLineItems">
<tbody >
<tr >
<td class="col-md-3"><a ng-hide="!lineItem.OrderLineItemModifiers.length " class="glyphicon glyphicon-plus" ng-model=show></a> <b>Item</b></td>
<td class="col-md-3">{{lineItem.Name}}</td>
<td class="col-md-3">{{lineItem.Quantity}}</td>
<td class="col-md-3">{{lineItem.TotalPrice}}</td>
</tr>
<tr ng-repeat="modifiers in lineItem.OrderLineItemModifiers" ng-show="show">
<td class="col-md-3"></td>
<td class="col-md-3 ordermodifier">{{modifiers.Name}}</td>
<td class="col-md-3"></td>
<td class="col-md-3 ">{{modifiers.TotalPrice}}</td>
</tr>
</tbody>
</table>
<div><b>Total Amount: {{order.TotalAmount}}</b></div>
And in the Javascript file:
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, order) {
$scope.toggleDetail = function ($index) {
$scope.activePosition = $scope.activePosition == $index ? -1 : $index;
};
});
What I am confused about is why would this work if I used an tag instead of an ? With the current code above, I would click on the "+" and it would not expand the row to show the modifier rows
Thank you!
<td class="col-md-3"><a ng-hide="lineItem.OrderLineItemModifiers.length !== 0 " class="glyphicon glyphicon-plus" ng-model=show></a> <b>Item</b></td>
try this. not sure what problem you had.