Question

我正在尝试动态地为数组添加和赋值，并让它们填充。但是我甚至无法获得要打印的console.log语句。我有点困惑为什么我没有收到错误或者是console.log语句。

控制器：

angular.module('myApp').
controller("Controller",["$scope", function($scope){

    $scope.customer = [

         {
            name: 'Drew',
            age: 30
         },

         {
            name: 'Meike',
            age: 54
         },

        {
            name: 'Peter',
            age: 25
        },
        {
            name: 'Alex',
            age: 44
        }
    ];

    $scope.addCustomer = function(customer_name,customer_age){

        var person = {
            name: customer_name,
            age: customer_age
        };

        customer.add(person);

        console.log("You added a person "+person.name+" who is "+person.age+" years old.");
    }

}])
    .directive("myNames",function(){
        return{
            restrict : 'E',
            transclude : false,
            templateUrl: 'pages/myNames.html',
            scope: {
                listcustomers: "="
            }
        };
    });

模板：

<div ng-repeat="customer in listcustomers">

    <table class="box-table" width="100%">
         <tr>
           <th>Name:{{customer.name}}</th>
           <th>Age:{{customer.age}}</th>
         </tr>
    </table>

</div>

<div>
    <input type="text" placeholder="enter a name" ng-model="customer_name">
    <input type="text" placeholder="enter a age" ng-model="customer_age">
    <button type="submit" value="Submit" ng-click="addCustomer(customer_name,customer_age)">Submit</button>
</div>

的index.html

<div ng-controller="Controller">
      <my-names listcustomers='customer'></my-names>
  </div>

Answer 1

您应该将addCustomer功能传递给模板

<div ng-controller="Controller">
      <my-names listcustomers='customer' add-customer='addCustomer'></my-names>
</div>

动态添加名称到模板内的数组

1 个答案: