AngularJS: ng-if, ng-repeat, ng-show, ng-hide and Bootstrap CSS framework integration

Показать описание

Covers the following:

-How to do a simple search for records using AJAX together with AngularJS

-How to integrate Bootstrap CSS framework as part of AnguarJS application

-How to use ng-if, ng-show and ng-hide

-Differences between ng-if and ng-show/ng-hide

-How to work with ng-repeat

-How to display multiple records using ng-repeat

-How to fetch multiple rows through AJAX and bind using ng-repeat

-How to make using ng-if/ng-show inside ng-repeat

-Inspect various scope object when dealing with ng-if and ng-show

Рекомендации по теме

Комментарии

very well explained. I suggest even if someone starting to go with Angular v2, Must go through these videos too. It just gives you all you need for angular.

shivanisehdev

and one thing more I want to say, some of tutorials on YouTube are only seen on desktop but I thank you your tutorial are good at phone also.

mohammadadilalam

Thank you for this comprehensive series. Listening to the jargon repeatedly helps!!!

jeannemccabe

A different level tutorial...
Hat's off man...
Greetings from a beginner...

vishnubenny

This is a super great series, but without the employee apis, it is a pain to follow it. can you please kindly point out where the employee api was created. I am happy to follow.

rotrose

amazing ~real world angularJS development workflow ! please cover improve performance of NG-repeat and ng-class

chengjinfei

Hi Tech CBT, your way of explanation is awesome ...But we need one crud application with the combination of rUI Router and Bootstrap with beautiful tables....
Please sir i am requesting you guys please make that videos as soon as possible many people are waiting for full length crud app

marrakulamurugan

nice video... btw, could you please tell me which "color theme" of sublime text you used in the video? additionally, did you use a particular font?

chengtie

please i am having issues with the node api .The link you gave is outdated. i have tried to develop my own api but i cant get it right.

soccerwithcoachtomiwa

That is a great tutorial, I'm realy respecting u man ty a lot. one qst plz where can I find the web service Employe bcz the link in the description dosn't work and thank you again.

benzrioualsouhail

Hi Please help on the below:-
Print the JSON in angular js, I can see the output in console, but not able to print the same in screen even not getting any error in log.Below are the code:
<body ng-app="myApp">
<div ng-controller="myCtrl">
<form class="form-inline">
<div class="form-group">
<label>Enter Employee Number</label>
<input type="text" class="form-control" ng-model="searchEmpNum"/>
</div>
<button class="btn btn-primary"
</form>
<hr>
</div>
<div class="row">
<div class="col-sm-2">Employee Number</div>
<div
</div>
<div class="row">
<div class="col-sm-2">Employee Name</div>
<div
</div>
<div class="row">
<div class="col-sm-2">Employee Post</div>
<div
</div>
<div class="row">
<div class="col-sm-2">Employee Salary</div>
<div
</div>
</body>

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', ['$scope', '$log', 'empService', function($scope, $log, empService){
$log.log('Inside controller');
$scope.doSearch = function(){
empService.findEmpById($scope.searchEmpNum, function(r){
$scope.empNo= r.empNo;
$scope.empName= r.empName;
$scope.empPost= r.empPost;
$scope.empSal= r.empSal;
});
}
}])
myApp.service('empService', ['$log', '$http', function($log, $http){
$log.log('Instantiating empService');

this.findEmpById =function(empNo, cb){
alert("Hello");
$http({
method:'GET'
})
.success(function(response){

cb(response.singleEmployee);
},
function(response){
$log.log('Some error occured');
})
}
}])

[Object]
0
:
Object
empName
:
"JONNY"
empNo
:
"7610"
empPost
:
"DOCTOR"
empSal
:
"50000"
__proto__
:
Object
length
:
1

deenmehta

That is a great tutorial. However i have a question...
what is the difference between ng-click and ng-submit. Can u please explain about this? That'll help a lot.

rahulismyid

Thank you Sir!
I am stuck at a particular case. When we search the Employee records based on an ID and that ID is not present, I am getting the below error:
"TypeError: Cannot read property 'ID' of null"
The line where the error is coming, is where the $scope member is being assigned the ID. (empService.GetEmployeeById($scope.searchEID, function (r) {
$scope.eid = r.ID;
Could you please assist on how to handle this?

MrPulkitg

source code link is not working please update with correct link in the discription/

deepakbellodi

Sir where have come employee it is from database, is't it?

advancecodes

In which video you explained how to reduce the ng-repeat scope data

banuprakashnagumothu

Hi
what can be done if this is the issue:

ngShow (if)"strName == '-place your name here-'"
Output 'Awesome name!'
ngHide (else)"strName == '-place your name here-'"
Output strName, ' is a not my name'

radhikagupta

Video was too long brother try to keep it as sort as possible, I mean around 15 - 20 min max with practical.

TellaTrix

Dear all, please provide me with rest api in order to compete tutorial.

EliteCameraman

HI Your videos are really helpful.
For learning purpose I started created a APP from scratch. Had some question.

1.How to update the data in ngRepeat. I am loading the data from $https service and showing only 10 objects out of 1000 using limitTo. created the next button which will be showing the next to objects.

It would be really helpful if you can make a video on this. and help me :)

AshishsinghRawat

AngularJS: ng-if, ng-repeat, ng-show, ng-hide and Bootstrap CSS framework integration

AngularJS: ng-if, ng-repeat, ng-show, ng-hide and Bootstrap CSS framework integration

ng hide and ng show in AngularJS

AngularJS Tutorial 11 - ng-if Directive

AngularJS For Everyone Tutorial #9 - ngIf vs ngShow & ngHide

AngularJS Tutorial 5 - ng-hide and ng-show

AngularJS Tutorial for Beginners - 4 - ng-repeat

AngularJS Tutorial for Beginners - 6 - ng-show and ng-hide

Learn AngularJS 3 Visibility controllers ng hide and ng show directive

AngularJS ng Repeat & Nested ng repeat [#5] | Angular JS Tutorial #angularjs

Angular Js ngIf vs ngShow

Difference between ng-show/ng-hide directives and ngIf in angularjs. | javapedia.net

AngularJS Basics Tutorial for Beginners - 08 - ng-show and ng-hide Directives

AngularJS Tutorial #12 - ng-show directive

Use of ng-hide and ng-show in angularJs || NST INFOTECH

AngularJS Tutorial 10 - ng-repeat Directive

ng-show and ng-hide in angular

AngularJS Dersleri || 19 - Directives - ng-show / ng-hide

JS Web apps - Angularjs - ng-if vs show and hide

angularJS using ng-hide and ng-show html elements with radio buttons

27 explain ng disabled, ng show, ng hide, ng click directive

AngularJS на практике - итерирование с ng-repeat-start

AngularJs events | ng-show | ng-hide with examples

AngularJS For Everyone Tutorial #2 - Repeating Over Data With ng-repeat

AngularJs table | angularJs ng-repeat with example