Angular 新手，非响应式动态表
Posted
技术标签:
【中文标题】Angular 新手，非响应式动态表【英文标题】：Angular newbie, non responsive dynamic table 【发布时间】：2018-03-20 07:03:02 【问题描述】：我对 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>
数据不是由我提供的数组填充的，它也没有响应。
【问题讨论】：
【参考方案1】：我真的无法理解您要做什么，但在您的代码中发现了一些基本错误：
-
名称不同，例如 MyDives in javascript 而 myDives in HTML。
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>
【讨论】：
以上是关于Angular 新手，非响应式动态表的主要内容，如果未能解决你的问题，请参考以下文章