角度改变个体价值全球变化值

时间:2015-03-05 16:18:37

标签: javascript arrays angularjs data-binding

我不确定该怎么称呼这个问题,但这是我的问题:

我有以下数组:

    $scope.competenceArray =[];

此数组包含以下对象:

var competence = {competence_type_id: type_id, id: id ,name: "name", organization_id: organization_id};

它包含或多或少50种此类对象。

然后我有另一个阵列:

    $scope.jobprofiles = [];

此数组包含以下许多对象:

    $scope.jobprofile = {name: name, selectedCompetence: [competence]};

因此,每个jobprofile都有一个name值,数组为competence

到目前为止一切顺利。

然后我有以下选择:

<div class="form-group">
<label>Vælg kompetencer</label>
<ui-select multiple ng-model="jobprofile.selectedCompetence" theme="bootstrap"
           ng-disabled="disabled">
    <ui-select-match placeholder="Vælg kompetencer">{{$item.name}} &lt;{{$item.competence_type_id ==
        1 ? 'Faglig' : 'Personlig' }}&gt;</ui-select-match>
    <ui-select-choices group-by="someGroupFn"
                       repeat="competence in competenceArray | propsFilter: {name: $select.search, competence_type_id: $select.search}">
        <div ng-bind-html="competence.name | highlight: $select.search"></div>
        <small>
            {{competence.competence_type_id == 1 ? 'Faglig' : 'Personlig'}}
        </small>
    </ui-select-choices>
</ui-select>

基本上这可以让我在我的competence

中添加多个jobprofile.selectedCompetence个对象

完成后,我将这些添加到可编辑的表格中:

                    <table class="table table-bordered table-hover table-condensed bg-white-only">
                    <tr style="font-weight: bold">
                        <td style="width:35%">Navn</td>
                        <td style="width:20%">Forventet niveau</td>
                        <td style="width:25%">Ret</td>
                    </tr>
                    <tr ng-repeat="selectCompetence in row.selectedCompetence">
                        <td class="v-middle">
                            <!-- editable username (text with validation) -->
<span editable-select="selectCompetence.name" e-name="name" e-ng-options="s.name as s.name for s in competenceArray" e-form="rowform" onbeforesave="checkName($data, user.id)"
      e-required>
  {{ selectCompetence.name || 'empty' }}
</span>
                        </td>
                        <td class="v-middle">
                            <!-- editable status (select-local) -->
<span editable-select="selectCompetence.level" e-name="level" e-form="rowform"
      e-ng-options="level.level_id as level.level_id for level in levelsArray">
  {{ selectCompetence.level  }}
</span>
                        </td>
                        <td style="white-space: nowrap">
                            <!-- form -->
                            <form editable-form name="rowform" onbeforesave="saveUser($data, user.id)"
                                  ng-show="rowform.$visible" class="form-buttons form-inline"
                                  shown="inserted == user">
                                <button type="submit" ng-disabled="rowform.$waiting"
                                        class="btn btn-sm btn-info">
                                    save
                                </button>
                                <button type="button" ng-disabled="rowform.$waiting"
                                        ng-click="rowform.$cancel()" class="btn btn-sm btn-default">
                                    cancel
                                </button>
                            </form>
                            <div class="buttons" ng-show="!rowform.$visible">
                                <button class="btn btn-sm btn-info" ng-click="rowform.$show()"><i class="fa fa-edit"></i></button>
                                <button class="btn btn-sm btn-danger" ng-click="removeCompetence(row,$index)"><i class="fa fa-times"></i></button>
                            </div>
                        </td>
                    </tr>
                </table>

首先,我遍历jobprofile数组

中的所有jobprofiles

然后,对于每个jobprofile i循环遍历competence

的数组
<tr ng-repeat="selectCompetence in row.selectedCompetence">

这样可以正常运行并且没有问题但是会发生一些奇怪的事情:

您需要注意的是以下代码行:

<td class="v-middle">
    <span editable-select="selectCompetence.level" e-name="level" e-form="rowform"
          e-ng-options="level.level_id as level.level_id for level in levelsArray">
      {{ selectCompetence.level  }}
    </span>

在这里,我可以使用以下数组编辑每个level的{​​{1}}:

selectedCompetence

现在解决实际问题。

当我将值 $scope.levelsArray = [ {level_id: 1}, {level_id: 2}, {level_id: 3}, {level_id: 4}, {level_id: 5}, {level_id: 6}, {level_id: 7}, {level_id: 9}, {level_id: 9}, {level_id: 10} ]; 添加到level时,它会自动将值添加到selectedCompetence中的对象。我调试并发现它可能是因为它们具有相同的哈希值。但有人能告诉我如何避免这种情况吗?

2 个答案:

答案 0 :(得分:1)

从我可以看到你通过引用传递对象,所以你实际上在同一个对象上工作,为了避免它,你需要创建一个副本,同时通过

angular.copy(obj)

Object.create(obj)

答案 1 :(得分:0)

javascript中的对象通过引用传递。因此,当您向作业添加权限时,您实际上已获得对权限数组中相同对象的引用。

我的方法是:

  1. 使用angular.copy将整个对象复制到作业自己的权限数组中,然后进行编辑。

  2. 创建一个对象,其中包含与能力ID相对应的键,以及与能力等级ID对应的值。