Angular 新手，非响应式动态表答案

【问题标题】：Angular newbie, non responsive dynamic tableAngular 新手，非响应式动态表
【发布时间】：2018-03-20 07:03:02
【问题描述】：

我对 Angular 真的很陌生，我试图在 2 天内理解它，但我对自己正在做的事情非常迷茫。

我正在尝试构建一个动态表，但它根本没有响应。

从技术上讲，我的 Angular 代码都不起作用。

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 html angularjs dynamic html-table

【解决方案1】：

我真的无法理解您要做什么，但在您的代码中发现了一些基本错误：

名称不同，例如 MyDives in javascript 而 myDives in HTML。
ng-app 和 ng-controllers 没有连接
多次使用 ng-app。没关系，但要使用它们有一些不同的方法。

据我所知，您正在尝试做类似的事情：

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;">&#x2706;</span> 0497077554  </a>
</footer>


</body>

【讨论】：