AngularJS转发器

时间:2015-07-22 22:52:32

标签: angularjs angularjs-ng-repeat

嗨,目前我正在使用api休息编程AngularJs中的一个应用程序,但有些东西我想念。

客户可以使用其分支机构创建组织。要创建和显示组织和分支机构,我使用下面的代码。

当用户创建组织时没有任何问题,但是当用户创建第二个时,代码会更新第一个条目并生成具有相同值的第二个条目。所以你有一把重复的钥匙。

我做错了什么?

下面你可以看到附带的代码和图片

第一次引入数据并发送api,但第二次出现相同的文本。我介绍了新的值并发送到api rest,并且api回答了正确的值,但myorganizations变量具有带有新值的重复键。

第一次 Modal Organizations First Time

第二次 Modal Organizations Second Time结果 Results after push in myorganizations variable

HTML文件

<div class="row">
    <h4>Mis Organizaciones  <a href=""  type="button" data-toggle="modal" data-target="#organizationModal"><small><span class="glyphicon glyphicon-plus"></span></small></a></h4>
  </div>
  <div class="row" ng-repeat="organization in myorganizations.data">
    <h5>{{organization.company_name}}</h5>
    <div ng-repeat="branch in organization.branches">
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 ">
        <div class="thumbnail">
          <a ui-sref="mybranchoffice({name: '{{branch.branch_name}}', id: '{{branch.branch_id}}', company_id: '{{organization.company_id}}'})">
          <div class="thumbnail-organization" style="background: url({{branch.branch_image_url}}) center center no-repeat;"></div>
          </a>
          <div class="caption">
            <h6 class="thumbnail-organization-name"></h6>
          </div>        
        </div>
      </div> 
      <div class="clearfix visible-sm" ng-if="($index+1)%2==0"></div>
      <div class="clearfix visible-md" ng-if="($index+1)%3==0"></div>
      <div class="clearfix visible-lg" ng-if="($index+1)%4==0"></div>
    </div>
    <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
      <div class="jumbotron">
        <a  type="button" href="" data-company="{{organization.company_id}}" data-toggle="modal" data-target="#branchModal">Create new Branch</a>
      </div>
    </div>
  </div>
  <div class="row col-lg-5 col-md-5 col-sm-6 col-xs-12">
    <div class="jumbotron">
      <a  type="button" href=""  data-toggle="modal" data-target="#organizationModal" >Create new Organization</a>
    </div>
  </div>
</div>

控制器

    $scope.newOrganization = function () {
        butlerService.createOrganization($scope.organization).then(function(neworganization){
            console.log(neworganization);
            tmp.data[0].company_id = neworganization.data.company_id;
            tmp.data[0].company_name = neworganization.data.company_name;
            tmp.data[0].branches=[];
            console.log(tmp);
            $scope.myorganizations.data.push(tmp.data[0]);
            console.log($scope.myorganizations);
        }), function (error){

        }
    }

服务

createOrganization: function (organization) {
            var deferred = $q.defer();
            $http({
                method: "post",
                url: urlCreateOrganization,
                data: organization
            })
            .success(function(response){
                deferred.resolve(response);
            })
            .error(function(err){
                deferred.reject(err);
            });
            return deferred.promise;
        }

1 个答案:

答案 0 :(得分:1)

如果没有看到你的变量init,很难肯定,但似乎在这里:

        tmp.data[0].company_id = neworganization.data.company_id;
        tmp.data[0].company_name = neworganization.data.company_name;
        tmp.data[0].branches=[];

您正在重写数组中的第一个元素。在这里:

$scope.myorganizations.data.push(tmp.data[0]);

您再次推送对数组中变量的相同引用。

只需在为其指定值之前以及在数组中将其推送之前创建新变量。 像这样:

var tmp = {};
tmp.company_id = neworganization.data.company_id;
tmp.company_name = neworganization.data.company_name;
tmp.branches=[];
console.log(tmp);
$scope.myorganizations.data.push(tmp);

FYI http返回promisse,你不必再把它包起来。