Reference the variable in expression for Angularjs ng-repeat - javascript

I have a table that I'm populating from a database using ng-repeat to produce objects that will be capable of being dragged and dropped. When I drag and drop an object onto a cell I need a way to find the id that comes from the initial load from the database so that I can update the database with the new position of the object within the table. From my understanding you should be able to reference the variable in the ng-repeat expression to do this? For example:
you could reference the x in: x in names? This is just example code of a table using ng-repeat:
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
I have tried to find an answer for this, by trying to just use Javascript to reference elements produced by angular, but that doesn't seem to work as they are not written to the html source (unless I inspect elements, but that doesn't show my id's). I also thought I could just reference this from the scope, but it would appear each instance of x would get its own scope variable. Is there any way to do something like this within angular context or would you need to use something like jquery?

Related

Can't present full JSON (ng-repeat) AngularJS

Try to present all data with ng-repeat from web service.
This is my controller JS (GetAllCtrl.js):
I get JSON data:
Now I want to get only company data without coupons data
(Company structure in JSON is: compName, id, email, coupons[])
In GetAllCtrl.js I have put the data in allComp variable.
This is GetAllCtrl.html:
I do ng-repeat in tr tag and use $index for loop on the array with data.
But in output, I get only 2 companies instead 4.
In clonsole.log I see 4 objects.
I'm new in AngularJS and JS and can't understand why it happened.
You are iterating over the wrong variable. It should be ng-repeat="c in getAllCtrl.allComp.data" and correspondingly change your td elements.
<tr ng-repeat="c in getAllCtrl.allComp.data track by $index">
<td align="center"><b>c.compName</b></td>
<td align="center"><b>c.id</b></td>
<td align="center"><b>c.email</b></td>
</tr>

create HTML inside javascript Angularjs

I'm creating HTML code inside javascript code, the problem is it doesn't recognize that it's an Angularjs code, how can I do that please ?
my problem is that the variables in {{}} are not recognized as Angularjs code and are put like that when I call the function from the view, even though on top of the view I have the declaration of ng-app and ng-controller on tope of the view.
Any help please ?
You have to inject ng-sanitize into your app and then include the ng-bind-html directive in your html in the elements you're generating from your controller.
So where you create your app module do something like:
angular.module('myApp',[ngSanitize])
That being said, you're doing it wrong. :)
Define the table in your html and use ng-repeat to generate the rows. I'm guessing there's something else to this, but it looks like you're trying to generate a table dynamically after some event occurs. Just put the table in your html and use ng-if to hide it until the event occurs.
Or do it in a component.
Your component html would basically just be your table layout like you're generating in the factory code stored in tableauComponent.html.
<table>
<tr>
<th>Matricule</th>
<th>Sexe</th>
<th>Direction</th>
<th>Type_contrat</th>
</tr>
<tr ng-repeat="x in tableau.data">
<td>{{ x.MATRICULE }}</td>
<td>{{ x.SEXE }}</td>
<td>{{ x.DIRECTION }}</td>
<td>{{ x.TYPE_CONTRAT }}</td>
</tr>
</table>
The component would get registered with your app with something like this:
angular.module("myApp").component("tableauComponent", {
templateUrl: 'tableauComponent.html',
controller: tableauController,
controllerAs: 'tableau'
})
function tableauController() {
var ctrl = this;
this.data = service call to get your data here.
}
Then whereever you want this baby to show in your html you just use:
<tableau-component></tableau-component>

Possible to access scope items that ng-repeat creates?

I'm under the impression that ng-repeat creates a new scope for each element in the array/object.
Is it possible to access these new scopes that the ng-repeat creates from the controller? For example if you know the index?
Any help would be much appreciated.
Check the console of this demo: JSFiddle.
console.log the scope, there are two attributes $$childHead and $$childTail. They are the first and last child scopes created by ng-repeat.
After getting the first child scope $$childHead, you can traverse to get other ng-repeat scope objects through $$nextSibling and $$prevSibling.
Note: these attributes start with $$, which indicate that they are private Angular variables. I suppose they are not intended to be used directly.
If you use ng-repeat like <div ng-repeat="item in items"></div>, you can use ng-click="dealWithItem(item, $index)" to pass this item to a function defined in the controller:
$scope.dealWithItem = function (item, index) {
// console.log(item);
}
It works for nested ng-repeat as well: JSFiddle.
When I tried Joy's answer, I got undefined for the item variable at the console. But there is an easier way to do it.
html:
<tr ng-repeat="name in names">
<button class="btn btn-info btn-sm pull-right" ng-click="dealWithItem()">{{name.first_name}}</button>
</tr>
Controller:
$scope.dealWithItem = function () {
console.log(this.name.first_name);
}
this.name will have all of the attributes associated with $scope.names.
You can use $parent as an argument of your function to access these scopes:
<div ng-repeat="item in items">
<div ng-click="doSomethingWithItem(item, $parent)"></div>
</div>

Angular JSON - Use 'track by' expression to

I am making a CRUD in angular + Php + MySql where I am facing a problem.
I have some data in database and want to show it on listing page.
To achieve this I made a ajax call in Angular and put the response in Scope Variable. If I print response its showing me below response but not able to show it in HTML. I am getting a problem i.e., :-
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: person in crew, Duplicate key: string:", Duplicate value: "\""
Below is the Angular and HTML code :-
.controller('wrapperController', ['$scope','$rootScope','$http', function(scope,rootScope,http){
http.post("server/viewRecords.php")
.success(function(response){
console.log(response);
scope.crew = response;
});
}])
<tr ng-repeat="person in crew">
<td>{{person.name}}</td>
<td>{{person.desc}}</td>
<td> Edit </td>
<td> Delete </td>
</tr>
Please suggest why I am getting this error?
Thanks!!
AngularJS does not allow duplicates in a ng-repeat directive. Therefore, you can add track by $index into the ng-repeat as following:
<tr ng-repeat="person in crew track by $index">
<td>{{person.name}}</td>
<td>{{person.desc}}</td>
<td> Edit </td>
<td> Delete </td>
</tr>
Track by $index tells angular to use $index, which is auto increment, as a key instead of each individual element in the array. So, it won't be duplicate anymore.

Child scope accessible in parent without 'ng-controller' directive set

I don't understand how this is possible. Please clear this up for me. I am reading about the scope inheritance and, as far as I understood, we cannot access child's scope from the parent, right?
So I have this situation where I created a controller but forgot to set it in the template via ng-controller detective. But it still works. I never noticed it. So is this the expected behaviour or I am just missing something? I din't even know what parts of code to list here.
It is an ordinary controller
angular.module('Basal.tables')
.controller('ListTablesCtrl', function($scope, getTablesS) {
$scope.tables = {};
getTablesS.fetch(function (d){
$scope.tables = d;
});
});
... executed at location change
when('/tables', {
templateUrl: '/views/tables/list-tables.html',
controller: 'ListTablesCtrl'
}).
But there is no mention of the controller in the template.
<div class='frame' id='list-tables'>
<section class='title'> Tables </section>
<table>
<tr ng-repeat='table in tables'>
<td><input type='checkbox'></td>
<td>{{ table.title }}</td>
<td>{{ table.desc }}</td>
</tr>
</table>
</div>
Everything works though. How is it possible to see the tables object here?
There is the top Main Controller set on the html body which means that it operates under this main controller in the template. But then how does it accesses child's scope?
Please explain if I am missing something silly.
Thanks.
Angular looks upwards for a controllers/method.
Meaning if it is not in the current scope, it will look into the parent scope.
But in your case, you have have attached the controller in your route file.
when('/tables', {
templateUrl: '/views/tables/list-tables.html',
controller: 'ListTablesCtrl'
})

Categories