单击“角度”复选框时更新不相关的字段

Update unrelated field when clicking Angular checkbox

本文关键字：更新 不相关 字段 复选框 角度 单击      更新时间：2023-09-26

我有一个人员复选框列表，我需要触发一个事件，该事件将显示有关在视图的另一个区域中选择的每个人的信息。 我正在使事件在我的控制器中运行并更新员工信息数组。 但是，视图不会使用此信息进行更新。 我认为这可能是某种范围问题，但找不到任何有效的方法。我尝试添加$watch，我的代码似乎认为它已经在运行。 我也尝试添加一条指令，但其中似乎没有任何内容使这项工作变得更好。 我对 Angular 非常非常陌生，不知道在哪里寻求帮助。

我的观点包括以下内容：

<div data-ng-controller="staffController as staffCtrl" id="providerList" class="scrollDiv">
    <fieldset>
        <p data-ng-repeat="person in staffCtrl.persons">
            <input type="checkbox" name="selectedPersons" value="{{ physician.StaffNumber }}" data-ng-model="person.isSelected"
               data-ng-checked="isSelected(person.StaffNumber)" data-ng-change="staffCtrl.toggleSelection(person.StaffNumber)" />
            {{ person.LastName }}, {{ person.FirstName }}<br />
        </p>
    </fieldset>
</div>
<div data-ng-controller="staffController as staffCtrl">
    # of items: <span data-ng-bind="staffCtrl.infoList.length"></span>
    <ul>
        <li data-ng-repeat="info in staffCtrl.infoList">
           <span data-ng-bind="info.staffInfoItem1"></span>
        </li>
    </ul>
</div>

我的控制器包括以下内容：

function getStaffInfo(staffId, date) {
    staffService.getStaffInfoById(staffId)
        .then(success)
        .catch(failed);
    function success(data) {
        if (!self.infoList.length > 0) {
           self.infoList = [];
        }
        var staffItems = { staffId: staffNumber, info: data };
        self.infoList.push(staffItems);
    }
    function failed(err) {
        self.errorMessage = err;
    }
}
self.toggleSelection = function toggleSelection(staffId) {
    var idx = self.selectedStaff.indexOf(staffId);
    // is currently selected
    if (idx >= 0) {
        self.selectedStaff.splice(idx, 1);
        removeInfoForStaff(staffId);
    } else {
        self.selectedStaff.push(staffId);
        getStaffInfo(staffId);
    }
};

提前感谢！！

在您发布的代码中，有两个主要问题。一个在模板中，一个在控制器逻辑中。

您的模板如下：

<div data-ng-controller="staffController as staffCtrl" id="providerList" class="scrollDiv">
    <!-- ngRepeat where you select the persons -->
</div>
<div data-ng-controller="staffController as staffCtrl">
    <!-- ngRepeat where you show persons info -->
</div>
在这里，您

声明了两次控制器，因此，您有两个实例。选择人员时，会将信息存储在第一个实例的数据结构中。但是，显示信息的视图部分正在使用未定义或空的数据结构的其他实例。控制器应该在两个div 的父元素上声明。

第二个错误如下：

if (!self.infoList.length > 0) {
    self.infoList = [];
}

你可能的意思是：

if (!self.infoList) {
    self.infoList = [];
}

可以改写为：

self.infoList = self.infoList || [];
相关文章：