У меня есть aproblem с angularjs ng-click не работает, моя модель не обновляется. Когда я хочу прочитать, переменные модели пустые. Я использую всплывающее окно bootstrap для отображения значений модели (название, действие используется для проверки внутри встроенного контроллера funciton).
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">×</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')
}
Проблема в том, что 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'"
ng-repeat
создаст новую область для каждой итерации.
"title= 'Update Project'; action='Update'"
будет выполнен успешно, но он будет записывать значения в под-область ng-repeat и не будет отображаться контроллером.
Чтобы решить проблему, вы можете создать контейнер данных в контроллере
$scope.data = {};
и напишите в контейнер
ng-click="data.title = 'Update Project'; data.action='Update'"'
code
action='UpdateProject'