Question

我对angularjs ng-click无效，我的模型没有更新。当我想读取模型变量为空时。我使用bootstrap弹出窗口来显示模型值（标题，动作用于控制器内部的功能验证）。

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')
}

Answer 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'"

Answer 2

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

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

要解决此问题，您可以在控制器中创建数据容器

$scope.data = {};

并写入容器

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

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

2 个答案: