时间戳

首页 > 解决方案 > AngularJS：更改其他 div 中的值，正在更改所有 div 中的数据

javascript - AngularJS：更改其他 div 中的值，正在更改所有 div 中的数据

问题描述

页面如下所示：

在此处输入图像描述

HTML

<li class="list-group-item" ng-repeat="eachData in lstRepositoryData">
    <div class="ember-view">
        <div class="github-connection overflow-hidden shadow-outer-1 br2">
            <!-- code to created other stuff-- >
            <div class="panel-heading">
                <a for="collapse{{$index}} accordion-toggle" data-toggle="collapse" href="#collapse{{$index}}" aria-expanded="true" aria-controls="collapse{{$index}}">Show SFDC
                    connections</a>
                <div id="collapse{{$index}}" class="collapse mt3 panel-collapse">
                    <div class="row no-gutters pa3">

                        <div class="col-12 col-sm-6 col-md-8">
                            <form>
                                <div class="form-group row">
                                    <label for="inputorgNamel3" class="col-sm-2 col-form-label required">Name</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="inputorgNamel3" placeholder="Name" ng-model="eachData.sfdcOrg.orgName" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputenvironment3" class="col-sm-2 col-form-label required">Environment</label>
                                    <div class="col-sm-10">
                                        <div class="dropdown bootstrap-select">
                                            <select class="form-control" id="inputenvironment3" ng-model="eachData.sfdcOrg.environment" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
                                                <option value="0" selected>Production/Developer</option>
                                                <option value="1">Sandbox</option>
                                                <option value="2">Custom Org</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="salesforceLoginl3" class="col-sm-2 col-form-label required">Salesforce Login</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="salesforceLoginl3" placeholder="Salesforce userName"
                                               ng-model="eachData.sfdcOrg.userName" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
                                    </div>
                                </div>
                                <div class="form-group row" ng-show="eachData.sfdcOrg.environment === '2'">
                                    <label for="salesforceinstanceURLl3" class="col-sm-2 col-form-label required">Instance Url</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="salesforceinstanceURLl3" placeholder="Salesforce Instance Url"
                                               ng-model="eachData.sfdcOrg.instanceURL" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="branchNamel3" class="col-sm-2 col-form-label required">Branch Name</label>
                                    <div class="col-sm-10">
                                        <input class="form-control" id="branchNamel3" placeholder="search branches..."
                                               ng-model="eachData.sfdcOrg.instanceURL">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="form-group">
                                        <!-- Buttons Code -->

                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</li>

JS代码：

var app = angular.module('forceCIApp', ["angularjs-dropdown-multiselect"]);
app.controller('orderFromController', function ($scope, $http, $attrs) {
$scope.reposInDB = [];
$scope.lstRepositoryData = [];
    const sfdcOrg = {
    orgName: '',
    environment: '0',
    userName: '',
    instanceURL: '',
    authorize: 'Authorize',
    save: 'Save',
    testConnection: 'Test Connection',
    delete: 'Delete',
    oauthSuccess: 'false',
    oauthFailed: 'false',
    oauthSaved: 'false',
    disabledForm: 'false',
    multiBranchData: [],
    multiExtraSettings: {enableSearch: true, showCheckAll: false, showUncheckAll: false},
    multiSelectedBranches: []
};

$http.get("/fetchUserName").then(function (response) {
    if (response.data !== undefined && response.data !== null) {
        $scope.userName = response.data.login;
        localStorage.setItem('githubOwner', response.data.login);
        $http.get("/fetchRepositoryInDB?gitHubUser=" + response.data.login).then(function (response) {
            if (response.data.length > 0) {
                for (let i = 0; i < response.data.length; i++) {
                    let lstBranches = [];
                    $.each(response.data[i].repository.mapBranches, function (key, value) {
                        console.log(key);
                        lstBranches.push(key);
                    });
                    sfdcOrg.multiBranchData = changeListToObjectList(lstBranches);
                    sfdcOrg.multiSelectedBranches = response.data[i].repository.lstSelectedBranches === undefined || null ? [] : changeListToObjectList(response.data[i].repository.lstSelectedBranches);
                    response.data[i].repository.sfdcOrg = sfdcOrg;
                    $scope.lstRepositoryData.push(response.data[i].repository);
                    $scope.reposInDB.push(response.data[i].repository.repositoryFullName);
                }
                $('#repoConnectedDialog').removeClass('hidden');
            }
        }, function (error) {

        });
        const avatarSpanTag = '<span class="absolute flex items-center justify-center w2 h2 z-2 ' +
            'nudge-right--4 pe-none" style="top: -15px">\n' +
            '          <img src=' + response.data.avatar_url + '>\n' +
            '        </span>';
        $(avatarSpanTag).insertAfter('#idSelectTab');
    }
}, function (error) {

});

当我开始编辑输入字段时，其他 div 输入字段也会发生变化。但是两个 div 中的数据不同eachData。同样禁用表单也eachData.sfdcOrg.disabledForm可以正常工作。但是修改输入元素会修改所有输入字段。

我该如何避免这种情况？

标签： javascripthtmlangularjs

解决方案

数据是通过引用赋值构造的，而不是为数组sfdcOrg中每个项目的每个属性创建一个克隆对象。lstRepositoryData

$http.get("/fetchRepositoryInDB?gitHubUser=" + response.data.login).then(function (response) {
    if (response.data.length > 0) {
        for (let i = 0; i < response.data.length; i++) {
            let lstBranches = [];
            $.each(response.data[i].repository.mapBranches, function (key, value) {
                console.log(key);
                lstBranches.push(key);
            });
            sfdcOrg.multiBranchData = changeListToObjectList(lstBranches);
            sfdcOrg.multiSelectedBranches = response.data[i].repository.lstSelectedBranches === undefined || null ? [] : changeListToObjectList(response.data[i].repository.lstSelectedBranches);
            ̶r̶e̶s̶p̶o̶n̶s̶e̶.̶d̶a̶t̶a̶[̶i̶]̶.̶r̶e̶p̶o̶s̶i̶t̶o̶r̶y̶.̶s̶f̶d̶c̶O̶r̶g̶ ̶=̶ ̶s̶f̶d̶c̶O̶r̶g̶;̶
            response.data[i].repository.sfdcOrg = angular.copy(sfdcOrg);
            $scope.lstRepositoryData.push(response.data[i].repository);
            $scope.reposInDB.push(response.data[i].repository.repositoryFullName);
        }
        $('#repoConnectedDialog').removeClass('hidden');
    }
});

用于angular.copy克隆新对象。

推荐阅读