Monday, 3 December 2018

$HTTP Service in angular js || Basics of Angular JS || Part-8



<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>





    <title>

        Directives

    </title>

    <script src="Scripts/angular.min.js"></script>

    <script src="Scripts/angular.js"></script>

    <link href="Content/bootstrap.css" rel="stylesheet" />

    <link href="Content/bootstrap.min.css" rel="stylesheet" />

</head>

<body ng-app="myApp" ng-controller="myCtrl">







    <table class="table table-responsive">





        <thead>

            <tr>

                <th>ID</th>

                <th>Name</th>

                <th>City</th>

                <th>salary</th>



            </tr>

        </thead>

        <tbody>



            <tr ng-repeat="x in names">

                <td>{{x.id}}</td>

                <td>{{x.Name}}</td>

                <td>{{x.City}}</td>

                <td>{{x.salary|currency:"PKR":3}}</td>







            </tr>





        </tbody>





    </table>









    <script>



        var app = angular.module('myApp', []);

        app.controller('myCtrl', function ($scope, $http) {

            $http.get("myfile.html").then(function (response) {

                $scope.names = response.data.records;

            });

        });





    </script>



</body>



</html>

----------------------------------------------------------------------
MYFILE.HTML....................................................................
{
  "records": [
    {
       "id":"101",
      "Name": "ali ahmed",
      "City": "karachi",
"salary":"100"
    },

 {
       "id":"102",
      "Name": "salman masood",
      "City": "karachi",
"salary":"5000"
    }


  ]
}

No comments:

Post a Comment

Pass Dynamically Added Html Table Records List To Controller In Asp.net MVC

Controller Code: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ...