Question

我正在尝试使用AngularJS并且很新。

<html ng-app="DemoApp">
<head>
<script src="/Angular/jslibs/angular.js"></script>
<script src="/Angular/app/app.js"></script>
<script src="/Angular/app/services/personData.js"></script>

<meta charset="ISO-8859-1">
<title>Angular Example</title>
</head>
<body>

    <div ng-controller="userCtrl">
        <h2>Actor List:</h2>
        <hr>
        <ul ng-repeat="person in persons">
            <li>{{person.name}} in {{person.city}}
                <button ng-click="removeActor($index)">Delete</button>
            </li>
        </ul>
        <hr>
        <input type="text" placeholder="Name" ng-model="actor.name" /> <input
            type="text" placeholder="City" ng-model="actor.city" />
        <button ng-click="addActor()">Add</button>

    </div>

</body>
</html>

app.js

var demoApp = angular.module("DemoApp", []);

demoApp.controller("userCtrl", function($scope, personData) {

    $scope.actor = personData.getActor();
    $scope.persons = personData.getPersons();
    $scope.addActor = personData.addActor;
    $scope.removeActor = personData.removeActor;

});

personData.js：

demoApp.factory("personData", function() {

    var actor = {
        name : "",
        city : ""
    };

    var persons = [ {
        name : "User1",
        city : "Location1"
    }, {
        name : "User2",
        city : "Location2"
    }, {
        name : "User3",
        city : "Location3"
    } ];

    return {

        addActor : function() {
            persons.push(actor);
            actor = {
                name : "",
                city : ""
            };
        },

        removeActor : function(index) {
            persons.splice(index, 1);
        },

        getPersons : function() {
            return persons;
        },

        getActor : function() {
            return actor;
        }

    }
});

我的问题是我在添加元素后无法向数组中添加元素。即使将actor设置为“”，对文本的任何更改都会更改数组中的值。

Answer 1

使用 $ scope.addActor = personData.addActor（）; 因为addActor是函数在你的控制器中你没有调用函数。

在控制器中你必须创建函数$ scope.addActor（）;因为你打电话给 ng-click addActor（）

<强>控制器：

的

的
$scope.addActor : funtion(){ personData.addActor(); $scope.persons = personData.getPersons(); }

的

Answer 2

$scope.actor = personData.getActor();
$scope.addActor = personData.addActor;

第一个语句会在调用$scope.actor时将personData对象分配给addActor，将该actor推送到数组，然后创建一个新对象，但$scope.actor仍指向到原始的演员对象。

更改为：

$scope.addActor = function() {
    personData.addActor();
    $scope.actor = personData.getActor();
}

Answer 3

尝试在控制器中创建一个函数，并传递要添加的actor对象

$scope.addActor = function(){
  personData.addActor($scope.actor);
    };

在您的服务中

addActor : function(actor) {
 persons.push(actor);
  },

添加元素后无法向阵列添加元素

3 个答案: