我对 Angular 真的很陌生,我试图在 2 天的时间内理解它,但我对我正在做的事情感到非常迷失。
我正在尝试构建一个动态表格,但它根本没有响应。
从技术上讲,我的 Angular 代码都不起作用。
https://jsfiddle.net/0zzyxxf0/
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>
数据不是由我提供的数组填充的,而且它也没有响应。
最佳答案
我真的无法理解您想要做什么,但在您的代码中发现了一些基本错误:
- 名称不同,例如 JavaScript 中的 MyDives 和 HTML 中的 myDives。
- ng-app 和 ng-controllers 中没有连接
- 多次使用 ng-app。没关系,但使用它们有一些不同的方法。
据我了解您的问题,您正在尝试做类似的事情:
JS
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>
关于javascript - Angular新手,无响应动态表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46640191/