• Tuesday , 13 November 2018

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

Code Canyon
https://i.ytimg.com/vi/kuzrQK3-KIA/hqdefault.jpg



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

Source code: http://www.techcbt.com/Post/354/Angular-JS-basics/how-to-work-with-ng-if-ng-repeat-bootstrap-in-angular-js

Original source

3d Ocean

Related Posts

20 Comments

  1. Rasel Rana
    August 17, 2018 at 08:12

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

  2. Deepak bellodi
    August 17, 2018 at 08:12

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

  3. Shivani Sehdev
    August 17, 2018 at 08:12

    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.

  4. BENZRIOUAL SOUHAIL
    August 17, 2018 at 08:12

    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.

  5. Rachitapatro Richi
    August 17, 2018 at 08:12

    Sir, Thanks for the great tutorial and information rich lecture videos but I am stuck in this video. I am unable to build the REST API. I am new to this technology so bit confused. It would be great if you help me with the lecture video of how to build the REST API. I tried this link "http://www.techcbt.com/Post/354/Angular-JS-basics/how-to-work-with-ng-if-ng-repeat-bootstrap-in-angular-js", mentioned in the earlier post, but its not working

  6. ranjithkea
    August 17, 2018 at 08:12

    make shorter videos

  7. vishnu benny
    August 17, 2018 at 08:12

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

  8. Rahul Ajrekar
    August 17, 2018 at 08:12

    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.

  9. Cheng Jinfei
    August 17, 2018 at 08:12

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

  10. marrakula murugan
    August 17, 2018 at 08:12

    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

  11. Jeanne McCabe
    August 17, 2018 at 08:12

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

  12. banuprakash nagumothu
    August 17, 2018 at 08:12

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

  13. Radhika Gupta
    August 17, 2018 at 08:12

    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'

  14. Ashish singh
    August 17, 2018 at 08:12

    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.
    https://github.com/ashish9342/yourPlace/blob/dev/app/scripts/controllers/edirectoryCtrl.js#L38

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

  15. Pulkit Gannjeer
    August 17, 2018 at 08:12

    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?

  16. Shixeli Rafiyev
    August 17, 2018 at 08:12

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

  17. Tie Cheng
    August 17, 2018 at 08:12

    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?

  18. Adil Alam
    August 17, 2018 at 08:12

    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.

  19. Deen Mehta
    August 17, 2018 at 08:12

    This is my json data which i am getting from rest service:
    {
    "singleEmployee": [
    {
    "empNo": "7839",
    "empName": "KING",
    "empPost": "PRESIDENT",
    "empSal": "5000"
    }
    ]
    }

  20. Deen Mehta
    August 17, 2018 at 08:12

    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" ng-click="doSearch()">Search</button>
    </form>
    <hr>
    </div>
    <div class="row">
    <div class="col-sm-2">Employee Number</div>
    <div class="col-sm-2">{{empNo}}</div>
    </div>
    <div class="row">
    <div class="col-sm-2">Employee Name</div>
    <div class="col-sm-2">{{empName}}</div>
    </div>
    <div class="row">
    <div class="col-sm-2">Employee Post</div>
    <div class="col-sm-2">{{empPost}}</div>
    </div>
    <div class="row">
    <div class="col-sm-2">Employee Salary</div>
    <div class="col-sm-2">{{empSal}}</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({
    url:'http://localhost:8085/empinfosystemnew/rest/allEmployee/' + empNo,
    method:'GET'
    })
    .success(function(response){
    $log.log(response.singleEmployee);
    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

Leave A Comment

You must be logged in to post a comment.