ng-Click 在 ng-repeat 表中不起作用答案

【问题标题】：ng-Click does not works in ng-repeat tableng-Click 在 ng-repeat 表中不起作用
【发布时间】：2015-09-24 15:27:09
【问题描述】：

我有一个问题，angularjs ng-click 不起作用，我的模型没有更新。当我想读取模型变量时是空的。我正在使用引导弹出窗口来显示模型值（标题、操作用于在控制器内部的功能中进行验证）。

HTML 代码

    <button ng-click="title = 'Add Project'; action='Add'" data-toggle="modal" data-target="#myModal" id="btnOpenPopUpForAdding" class="btn btn-default" title="Add new project"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>

    <table class="table" id="tblProjects" style="display:none;">
        <thead>
            <tr>
                <th>

                </th>
                <th>
                    Project Name
                </th>
                <th>
                    Project Description
                </th>
            </tr>
        </thead>
        <tr ng-repeat="project in projects" >
            <td>
                <button ng-click="title = 'Update Project'; action='Update'" data-toggle="modal" data-target="#myModal" class="btn btn-default" title="Update project">
                    <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                </button>
            </td>
            <td>
                <span>{{project.ProjectName}}</span>
            </td>
            <td>
                <span>{{project.ProjectDescription}}</span>
            </td>
        </tr>
    </table>
    @Html.Partial("../ProjectView")
</div>

局部视图

<!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">{{title}}</h4>
        </div>
        <div class="modal-body">
            <label for="txtProjectName">Project Name</label>
            <input ng-model="singleProject.ProjectName" type="text" class="form-control" style="width:65%" id="txtProjectName" placeholder="Type the project name" />
            <br />
            <label for="txtProjectDescription">Project Description</label>
            <textarea ng-model="singleProject.ProjectDescription" class="form-control" style="width:65%" id="txtProjectDescription" placeholder="Type the project description" rows="4"></textarea>
        </div>

        <div class="modal-footer">
            <button id="btnSave" type="button" class="btn btn-primary" ng-click="ThrowEvent()">Save</button>
            <button id="btnCancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        </div>
    </div>

控制器代码

$scope.ThrowEvent = function () {
    if ($scope.action == 'Add')
        $scope.AddProject($scope.singleProject);
    if($scope.action == 'Update')
        $scope.UpdateProject($scope.singleProject);
    //if($scope.action == 'Delete')
}

【问题讨论】：

action='UpdateProject'怎么样
ng-click 按钮 Add 正在工作（在 ng-repeat 之外），但不能更新（在 ng-repeat 内）
当我尝试从控制器读取时，操作显示为空

标签： javascript jquery .net angularjs html

【解决方案1】：

问题在于 ng-repeat 创建了单独的子作用域。在您的情况下 ng-click="title = 'Update Project'; action='Update'" 其中 title 和 action 分配给子范围，而不是父范围。

要解决此问题，您必须在控制器中为模型添加前缀，例如

$scope.myActions = {title: 'Default Title', action: 'Default action'};

那你可以把ng-click="title = 'Update Project'; action='Update'"改成ng-click="myActions.title = 'Update Project'; myActions.action='Update'"

【讨论】：

【解决方案2】：

ng-repeat 将为每次迭代创建一个新范围。

"title = 'Update Project'; action='Update'" 将执行成功，但会将值写入 ng-repeat 的子范围，并且控制器不可见。

为了解决这个问题，你可以在控制器中创建一个数据容器

$scope.data = {};

并写入容器

ng-click="data.title = 'Update Project'; data.action='Update'"`

【讨论】：