D4mations.com

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

[ad_1]
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

d4mer

,
, , , , , , , , , , , , ,

20 responses to “AngularJS: ng-if, ng-repeat, ng-show, ng-hide and Bootstrap CSS framework integration”

  5. 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

  10. 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

  13. 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. 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. 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?

  20. 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 Reply