Angular newbie, non responsive dynamic table

I’m really really new to Angular, I’m trying to understand it in 2 days time and I’m extremely lost in what I am doing.

I am trying to build a dynamic table but it’s not being responsive at all.

Technically, none of my Angular codes are working.

JS:

var topDivesApp = function ($scope){
  $scope.topDives = [
                { Site: "Palau", Country: "Phillipines" },
                { Site: "The Nile", Country: "Egypt" },
                { Site: "Florida", Country: "United States of America" }
            ];

            $scope.Add = function () {
                //Add the new item to the Array.
                var topDives = {};
                topDives.Site = $scope.Site;
                topDives.Country = $scope.Country;
                $scope.TopDives.push(topDives);

                //Clear the TextBoxes.
                $scope.Site = "";
                $scope.Country = "";
            };

            $scope.Remove = function (index) {
                //Find the record using Index from Array.
                var name = $scope.TopDives[index].Site;
                if ($window.confirm("Do you want to delete: " + name)) {
                    //Remove the item from Array using Index.
                    $scope.TopDives.splice(index, 1);
                }
            };

   }; 

   var myDivesApp = function ($scope){
      $scope.MyDives = [
                { Site: "Byron Bay", Country: "Australia" },
                { Site: "Jervis Bay", Country: "Australia" },
                { Site: "The Nile", Country: "Egypt" }
            ];

            $scope.Add = function () {
                //Add the new item to the Array.
                var myDives = {};
                myDives.Site = $scope.Site;
                myDives.Country = $scope.Country;
                $scope.MyDives.push(myDIves);

                //Clear the TextBoxes.
                $scope.Site = "";
                $scope.Country = "";
            };

            $scope.Remove = function (index) {
                //Find the record using Index from Array.
                var name = $scope.MyDives[index].Site;
                if ($window.confirm("Do you want to delete: " + name)) {
                    //Remove the item from Array using Index.
                    $scope.MyDives.splice(index, 1);
                }
            };

 };

HTML:

<html app>

 <head>

<title> Dive Destinations </title>

<link rel="stylesheet" href="css/style.css">

<script type="text/javascript"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

   <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<script src="dives.js"></script>


 </head>

<body ng-controller="TopDivesController">



<nav class="float"> 
        <a href="index.html" >HOME</a>
        <a href="topdives.html"> TOP DIVE DESTINATIONS </a>
        <a href="mydives.html" class="currentPg"> MY DIVE DESTINATIONS </a>

</nav>


<div class="outer">
<div class="middle">
<div class="inner">


        <div class="bodySect">

        <div ng-app="myDivesApp" ng-controller="MyDivesController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Site</th>
                <th>Country</th>
                <th></th>
            </tr>
            <tbody ng-repeat="n in myDives">
                <tr>
                    <td>{{n.Site}}</td>
                    <td>{{n.Country}}</td>
                    <td><input type="button" ng-click="Remove($index)" value="Remove" /></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><input type="text" ng-model="Site" /></td>
                    <td><input type="text" ng-model="Country" /></td>
                    <td><input type="button" ng-click="Add()" value="Add" /></td>
                </tr>
            </tfoot>
        </table>
    </body>
 </html>

The data is not populated by the arrays I have provided, and it’s also not responsive.

Answer

I really don’t able to to understand what you are trying to do but the found some basic mistakes in your code:

Names are different like in case of MyDives in javascript while myDives in HTML.
No connection in ng-app and ng-controllers
Multiple use of ng-app. It is ok but to use them there is some different method.

As what I able to understand about your problem, you are trying to do something like that:

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

app.controller("MyDivesController",function ($scope){
  $scope.MyDives = [
                    { Site: "Byron Bay", Country: "Australia" },
                    { Site: "Jervis Bay", Country: "Australia" },
                    { Site: "The Nile", Country: "Egypt" }
                ];
     
                $scope.Add = function () {
                    //Add the new item to the Array.
                    var myDives = { 
                    Site : $scope.Site,
                    Country : $scope.Country
                    };                    
                    $scope.MyDives.push(myDives);
     
                    //Clear the TextBoxes.
                    $scope.Site = "";
                    $scope.Country = "";
                };
     
                $scope.Remove = function (index) {
                    $scope.MyDives.splice(index,1);
                };
            
});

HTML

<body>

<h1> DIVE DESTINATIONS </h1>

    <nav class="float"> 
            <a href="index.html" >HOME</a>
            <a href="topdives.html"> TOP DIVE DESTINATIONS </a>
            <a href="mydives.html" class="currentPg"> MY DIVE DESTINATIONS </a>

    </nav>


    <div class="outer">
    <div class="middle">
    <div class="inner">


            <div class="bodySect">
                
            <div ng-app="DivesApp" ng-controller="MyDivesController">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <th>Site</th>
                    <th>Country</th>
                    <th></th>
                </tr>
                <tbody ng-repeat="dive in MyDives">
                    <tr>
                        <td>{{dive.Site}}</td>
                        <td>{{dive.Country}}</td>
                        <td><input type="button" ng-click="Remove($index)" value="Remove" /></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td><input type="text" ng-model="Site" /></td>
                        <td><input type="text" ng-model="Country" /></td>
                        <td><input type="button" ng-click="Add()" value="Add" /></td>
                    </tr>
                </tfoot>
            </table>

            <br><br><br>
        </div>     
      </div>
        </div>


    </div>
    </div>
    </div>


<footer> 
    <a href="tel:m"><span style="font-size: 1.5em; position: relative;
    top: 2px;">✆</span> 0497077554  </a>
</footer>


</body>

Advertisement

Answer