Question

我正在尝试更新我的数组并在视图中呈现它。阅读并查看示例后，看起来$ apply是解决方案。然而，如何在控制器中应用它让我很困惑。

模板

  <div ng-controller="Controller">
        <div ng-repeat="customer in listcustomers |orderBy:'-age'">

            <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" name="customer_name">
            <input type="text" placeholder="enter a age" ng-model="customer.age" name="customer_age">
            <button type="submit" ng-click="addCustomer(customer_name,customer_age)">Submit</button>
        </div>
    </div>

controller

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

        $scope.customer.push(person);
        console.log("Person was added: "+person);
    }

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

的index.html

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

正在更新阵列。我通过在控制台中打印出阵列来确认。问题是视图中没有更新。

Answer 1

您没有按预期收到您的价值观。如果您尝试访问其中一个属性，则会在控制台输出中显示。

而是使用新客户数据在范围上创建对象。单击“提交”时，只需将其复制到阵列即可。此外，您发布的代码也没有错误。您在readonly='readonly'上重复，但请转到listcustomers？

我已在this plunker

中修改了您的代码

这是一个想法。

customer

并在您的HTML中

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

  $scope.customers = [...];

  $scope.newCustomer = {};

  $scope.addCustomer = function() {   
    $scope.customers.push($scope.newCustomer);
  }
}]);

我已经剥掉了不必要的部分。

Answer 2

我已经将代码模塑到一定程度，因为它没有得到妥善管理，现在它对我来说工作正常。

<强>的index.html

 <div ng-app="myApp">
    <div ng-controller="MyController">
        <div ng-repeat="c in listCustomers |orderBy:'-age'">

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

        </div>

        <div>
            <input type="text" placeholder="enter a name" ng-model="customer.name" name="customer_name">
            <input type="text" placeholder="enter a age" ng-model="customer.age" name="customer_age">
            <button type="submit" ng-click="addCustomer(customer.name, customer.age)">Submit</button>
        </div>
        </div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="../app.js"></script>

<强> app.js

var MyApp = angular.module('myApp', [])

MyApp.controller("MyController",["$scope", function($scope){

    $scope.customer = {name:'', age:''};
    $scope.listCustomers = [

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

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

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

    $scope.addCustomer = function(customerName,customerAge){
            var data = {name:customerName, age:customerAge};
            $scope.listCustomers.push(data);
            console.log("Person was added: "+$scope.customer);
    }

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

Answer 3

由于您创建了隔离范围并将变量命名为listcustomer

scope: {
    listcustomers: "="
}

您应该使用该变量将新值推送到数组中：

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

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

        $scope.listcustomers.push(person); // HERE
        console.log("Person was added: "+person);
    }

使用ng-repeat angularJS更新视图中的数组

3 个答案: