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.
https://jsfiddle.net/0zzyxxf0/
JS:
JavaScript
x
60
60
1
var topDivesApp = function ($scope){2
$scope.topDives = [3
{ Site: "Palau", Country: "Phillipines" },4
{ Site: "The Nile", Country: "Egypt" },5
{ Site: "Florida", Country: "United States of America" }6
];7
8
$scope.Add = function () {9
//Add the new item to the Array.10
var topDives = {};11
topDives.Site = $scope.Site;12
topDives.Country = $scope.Country;13
$scope.TopDives.push(topDives);14
15
//Clear the TextBoxes.16
$scope.Site = "";17
$scope.Country = "";18
};19
20
$scope.Remove = function (index) {21
//Find the record using Index from Array.22
var name = $scope.TopDives[index].Site;23
if ($window.confirm("Do you want to delete: " + name)) {24
//Remove the item from Array using Index.25
$scope.TopDives.splice(index, 1);26
}27
};28
29
}; 30
31
var myDivesApp = function ($scope){32
$scope.MyDives = [33
{ Site: "Byron Bay", Country: "Australia" },34
{ Site: "Jervis Bay", Country: "Australia" },35
{ Site: "The Nile", Country: "Egypt" }36
];37
38
$scope.Add = function () {39
//Add the new item to the Array.40
var myDives = {};41
myDives.Site = $scope.Site;42
myDives.Country = $scope.Country;43
$scope.MyDives.push(myDIves);44
45
//Clear the TextBoxes.46
$scope.Site = "";47
$scope.Country = "";48
};49
50
$scope.Remove = function (index) {51
//Find the record using Index from Array.52
var name = $scope.MyDives[index].Site;53
if ($window.confirm("Do you want to delete: " + name)) {54
//Remove the item from Array using Index.55
$scope.MyDives.splice(index, 1);56
}57
};58
59
}; 60
HTML:
JavaScript
1
63
63
1
<html app>2
3
<head>4
5
<title> Dive Destinations </title>6
7
<link rel="stylesheet" href="css/style.css">8
9
<script type="text/javascript"> </script>10
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>11
12
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>13
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>14
15
<script src="dives.js"></script>16
17
18
</head>19
20
<body ng-controller="TopDivesController">21
22
23
24
<nav class="float"> 25
<a href="index.html" >HOME</a>26
<a href="topdives.html"> TOP DIVE DESTINATIONS </a>27
<a href="mydives.html" class="currentPg"> MY DIVE DESTINATIONS </a>28
29
</nav>30
31
32
<div class="outer">33
<div class="middle">34
<div class="inner">35
36
37
<div class="bodySect">38
39
<div ng-app="myDivesApp" ng-controller="MyDivesController">40
<table cellpadding="0" cellspacing="0">41
<tr>42
<th>Site</th>43
<th>Country</th>44
<th></th>45
</tr>46
<tbody ng-repeat="n in myDives">47
<tr>48
<td>{{n.Site}}</td>49
<td>{{n.Country}}</td>50
<td><input type="button" ng-click="Remove($index)" value="Remove" /></td>51
</tr>52
</tbody>53
<tfoot>54
<tr>55
<td><input type="text" ng-model="Site" /></td>56
<td><input type="text" ng-model="Country" /></td>57
<td><input type="button" ng-click="Add()" value="Add" /></td>58
</tr>59
</tfoot>60
</table>61
</body>62
</html>63
The data is not populated by the arrays I have provided, and it’s also not responsive.
Advertisement
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:
JS
JavaScript
1
28
28
1
var app = angular.module("DivesApp",[]);2
3
app.controller("MyDivesController",function ($scope){4
$scope.MyDives = [5
{ Site: "Byron Bay", Country: "Australia" },6
{ Site: "Jervis Bay", Country: "Australia" },7
{ Site: "The Nile", Country: "Egypt" }8
];9
10
$scope.Add = function () {11
//Add the new item to the Array.12
var myDives = { 13
Site : $scope.Site,14
Country : $scope.Country15
}; 16
$scope.MyDives.push(myDives);17
18
//Clear the TextBoxes.19
$scope.Site = "";20
$scope.Country = "";21
};22
23
$scope.Remove = function (index) {24
$scope.MyDives.splice(index,1);25
};26
27
}); 28
HTML
JavaScript
1
61
61
1
<body>2
3
<h1> DIVE DESTINATIONS </h1>4
5
<nav class="float"> 6
<a href="index.html" >HOME</a>7
<a href="topdives.html"> TOP DIVE DESTINATIONS </a>8
<a href="mydives.html" class="currentPg"> MY DIVE DESTINATIONS </a>9
10
</nav>11
12
13
<div class="outer">14
<div class="middle">15
<div class="inner">16
17
18
<div class="bodySect">19
20
<div ng-app="DivesApp" ng-controller="MyDivesController">21
<table cellpadding="0" cellspacing="0">22
<tr>23
<th>Site</th>24
<th>Country</th>25
<th></th>26
</tr>27
<tbody ng-repeat="dive in MyDives">28
<tr>29
<td>{{dive.Site}}</td>30
<td>{{dive.Country}}</td>31
<td><input type="button" ng-click="Remove($index)" value="Remove" /></td>32
</tr>33
</tbody>34
<tfoot>35
<tr>36
<td><input type="text" ng-model="Site" /></td>37
<td><input type="text" ng-model="Country" /></td>38
<td><input type="button" ng-click="Add()" value="Add" /></td>39
</tr>40
</tfoot>41
</table>42
43
<br><br><br>44
</div> 45
</div>46
</div>47
48
49
</div>50
</div>51
</div>52
53
54
<footer> 55
<a href="tel:m"><span style="font-size: 1.5em; position: relative;56
top: 2px;">✆</span> 0497077554 </a>57
</footer>58
59
60
</body>61