Angularjs Angular中的新对象永久绑定到模板元素

我有一个小的角度项目，它实现了一个控制器：

concernsApp.factory('ConcernService', function ($http, $q) {
var api_url = "http://localhost:8000/api/";

var ConcernService = {

    ...

    save: function (url, obj) {
        console.log(obj)
        var defer = $q.defer();
        $http({method: 'POST',
            url: api_url + url,
            data: obj}).
            success(function (data, status, headers, config) {
                defer.resolve(data);
            }).error(function (data, status, headers, config) {
                defer.reject(status);
            });
        return defer.promise;
        },
    };
    return ConcernService;
});


concernsApp.controller('ProjectsCtrl', function ($scope, $http, ConcernService) {

    ...

    $scope.createProject = function(new_project) {
        ConcernService.save('projects/', new_project).then(function(){
            $scope.projects.push(new_project);
        });
    };

html模板：

<div ng-controller="ProjectsCtrl" ng-init="getProjects(); getTasks(); new_project = {};">
    <div class="row col-lg-8">
      <h2>Projects</h2>
      <input type="text" ng-model="search_projects" class="form-control" style="width:300px; margin: 30px 0px">

      <table class="table table-bordered col-lg-8" ng-repeat="project in projects | orderBy: 'id' | limitTo: 10 | filter:search_projects">
        <tr>
            <td class="col-lg-4">
                <h3>{{ project.id }}</h3>
                <h4>{{ project.title }}</h4>
            </td>
            <td class="col-lg-2">
                <a href="#" ng-click="deleteProject(project)">Delete Project</a>
            </td>
        </tr>
      </table>
    </div>
   <div class="row">
     <div class="col-lg-8">
       <h2>Create a New Project</h2>
       <form class="form-horizontal">
         <div class="control-group">
           <label class="control-label" for="id_title">Title</label>
             <div class="controls">
               <input type="text" id="title" class="form-control" placeholder="Title" ng-model="new_project.title">
             </div>
           </div>
         </form>
        <br />
        <button class="btn btn-success" ng-click="createProject(new_project)">create</button>
     </div>
   </div>
 </div>

项目
{{project.id}
{{project.title}
创建新项目
标题


创造

因此，在成功提交到API后，代码将

新项目

对象推送到

$scopes.projects

，效果非常好。但是，当我开始在“创建项目标题”输入字段中键入时，它似乎绑定到上一个新项目，并且该项目的标题开始动态更改

---

这显然也会停止任何新的项目对象创建。我对Angular很陌生，我不确定这里发生了什么，也不知道如何解决它。基本上，我希望继续创建新项目并将它们推送到数组中。

您正在

nginit

中设置

new\u project={}

，当指令放入DOM中时，只会发生一次

在

createProject

函数中，您可以将其重置为

{}

以创建一个新的

new\u项目

$scope.createProject=函数（新项目）{
ConcernService.save（'projects/'，new_project）.然后（function（））{
$scope.projects.push（新项目）；
$scope.new_project={}；
});
};

作为旁注，我将把
new_project={}
的定义也移到控制器上

作为一般的角度禅：

将作用域在模板中视为只读，在控制器中视为只读。
您正在
ng init
中设置
new_project={}
，当指令放入DOM中时，只会发生一次

在
createProject
函数中，您可以将其重置为
{}
以创建一个新的
new\u项目

$scope.createProject=函数（新项目）{
ConcernService.save（'projects/'，new_project）.然后（function（））{
$scope.projects.push（新项目）；
$scope.new_project={}；
});
};

作为旁注，我将把
new_project={}
的定义也移到控制器上

作为一般的角度禅：

在模板中将作用域视为只读，在控制器中将其视为只读。
太好了-这让我走上了正确的道路！我必须使用
$scope.new_project={}尽管如此。太棒了。也很高兴知道有一个禅宗的棱角。来自Python，这非常受欢迎；）太好了，这让我走上了正确的道路！我必须使用
$scope.new_project={}尽管如此。太棒了。也很高兴知道有一个禅宗的棱角。来自Python，这非常受欢迎；）