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"
    }


  ]
}

Sorting Filters in Angular JS || Basics of Angular JS || Part-6





<!DOCTYPE html>

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

<head>

    <title></title>

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

    <script src="Scripts/angular.min.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">

    <div class="container">



        <button class="btn btn-danger" ng-click="orderByMe('name')">Order by Name </button>

        <button class="btn btn-info" ng-click="orderByMe('country')">Order by Country </button>



        <table class="table table-responsive">



            <thead>

                <tr>

                    <th>ID</th>

                    <th>nAME</th>

                    <th>Country</th>



                </tr>

            </thead>



            <tbody>



                <tr ng-repeat="x in names | orderBy:myOrderBy">



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

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

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





                </tr>



            </tbody>





        </table>

    </div>



</body>

</html>





<script>

    var app = angular.module("myapp", []);

    app.controller("myctrl", function ($scope) {



        $scope.names = [

       { id: 108, name: 'ali', country: 'Norway' },

       { id: 107, name: 'ahmed', country: 'Sweden' },

       { id: 106, name: 'sami', country: 'England' },

       { id: 105, name: 'hassan', country: 'Norway' },

       { id: 104, name: 'haris', country: 'Denmark' },

       { id: 103, name: 'faris', country: 'Sweden' },

       { id: 102, name: 'faris', country: 'Sweden' },



        ];

        $scope.orderByMe = function (x)

        {

            $scope.myOrderBy = x;



        };







    }); //controller end.................







</script>

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