Question

我对Angular真的很陌生，我试图在2天内理解它，而且我对我正在做的事情感到非常迷茫。

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

从技术上讲，我的Angular代码都没有工作。

JS：

lshw -c video
WARNING: you should run this program as super-user.
  *-display               
       description: VGA compatible controller
       product: 82Q33 Express Integrated Graphics Controller
       vendor: Intel Corporation
       physical id: 2
       bus info: pci@0000:00:02.0
       version: 02
       width: 32 bits
       clock: 33MHz
       capabilities: vga_controller bus_master cap_list rom
       configuration: driver=i915 latency=0
       resources: irq:26 memory:fdf00000-fdf7ffff ioport:ff00(size=8) memory:d0000000-dfffffff memory:fdc00000-fdcfffff
WARNING: output may be incomplete or inaccurate, you should run this program as super-user.

HTML：

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);
                }
            };

 };

我提供的数组没有填充数据，也没有响应。

Answer 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:+61497077554"><span style="font-size: 1.5em; position: relative;
    top: 2px;">&#x2706;</span> 0497077554  </a>
    <a href="contact.html"><span style="font-size: 1.85em; position: relative;
    top: 4.5px;">&#x2709;</span> toy@kuldsigns.com</a> 
    <a href="https://www.linkedin.com/in/toy-sirichindakul/" target="_blank"><span style="font-size: 1.2em;">&#x270E;</span> LinkedIn</a> 
    <br> Designed and Implemented by Toy Sirichindakul 
</footer>


</body>

角度新手，非响应动态表

1 个答案: