Amigos Amigos - 1 month ago 23
HTML Question

Modal not working based on model

I have a modal popup template which is for create and edit detail. It popup between create and edit by using angular and model to populate value. However,the modal popup does not reflect the create condition but does reflect the edit condition, which mean this part has been gone through when debugging

$scope.ID = 0;
$scope.Title = '';
$scope.modalHeader = "Add New List";


but when the modal popup, the Title field is not empty and header is not populated.

All in all, the debugger does reflect when click on edit and create button.

html:

<button class="btn btn-success" ng-disabled="error" data-toggle="modal" data-target="#addNewListModal" ng-controller="boardCtrl" ng-click="editList('new')">
<span class="glyphicon"></span>Add New List
</button>
<div class="row" ng-controller="boardCtrl">
<div id="loggedInUsername" hidden>@ViewBag.Username</div>
<div ng-include="'/AppScript/busyModal.html'" ng-show="isLoading"></div>

<div class="col-lg-3 panel panel-primary colStyle" id="{{toDoList.Id}}" kanban-board-drop="over"
ng-repeat="toDoList in toDoLists">
<div class="panel-heading" style="margin-bottom: 10px; text-align: center;">
<h3 class="panel-title">
{{toDoList.Title}}
<button class="btn pull-right" ng-disabled="error" data-toggle="modal" data-target="#addNewListModal" ng-click="editList($index)">
<span class="glyphicon glyphicon-pencil" style="color:blue"></span>
</button>
</h3>
</div>
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#addNewTaskModal" data-tasklistid="{{toDoList.Id}}">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
<div class="thumbnail" draggable="true" kanban-board-dragg="toDoTask"
ng-repeat="toDoTask in toDoList.ToDoTasks" style="margin-bottom: 10px;">
<div class="caption">
<h5><strong>{{toDoTask.Title}}</strong></h5>
<p>{{toDoTask.Description}}</p>
<p><button href="#" class="btn btn-primary btn-sm" ng-click="FindToDoTask(toDoTask.Id);" data-toggle="modal" data-target="#editTaskModal">Edit</button>
</p>
</div>
</div>
</div>


ctrl.js:

$scope.editList = function (id) {
debugger;
if (id == 'new') {
//$scope.edit = true;
//$scope.incomplete = true;
$('#newListSubmit').removeAttr('disabled');
$scope.ID = 0;
$scope.Title = '';
$scope.modalHeader = "Add New List";
} else {
//$scope.edit = false;
$scope.ID = $scope.toDoLists[id].ID;
$scope.Title = $scope.toDoLists[id].Title.trim();
$scope.modalHeader = "Update List";
//$scope.incomplete = false;
}
};


modal:

<div id="addNewListModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title" id="modalTitle" ng-model="modalHeader">{{modalHeader}}</h4>
</div>
<div class="modal-body" id="modalBody">
<!-- content goes here -->
<input type="text" hidden="hidden" ng-model="ID" name="ID">
<form id="newListForm" method="post">
<div class="form-group">
<label for="newListTitle">Title</label>
<input type="text" class="form-control" id="newListTitle" name="Title" placeholder="Enter Title" ng-model="Title">
</div>
</form>
</div>
<div class="modal-footer">
<button id="newListSubmit" type="submit" class="btn btn-default" ng-click="AddNewList();">Submit</button>
</div>
</div>

</div>
</div>

Answer

you have 2 instances of boardCtrl controller, one on the button:

<button class="btn btn-success" 
        ng-disabled="error" 
        data-toggle="modal" 
        data-target="#addNewListModal" 
        ng-controller="boardCtrl" 
        ng-click="editList('new')">

and other on the main div:

<div class="row" ng-controller="boardCtrl">
  .....
</div>

they create different scopes (even if you will use same aliases like ng-controller="boardCtrl as bc"), so, just move your ngController to some common for both elements section and remove from the button and row div. For example, you may move the ngController to the body tag:

<body ng-controller="boardCtrl">
  <button class="btn btn-success" 
          ng-disabled="error" 
          data-toggle="modal" 
          data-target="#addNewListModal" 
          ng-click="editList('new')">
  <div class="row">
    .....
  </div>
</body>

plunker: http://plnkr.co/edit/boPkGYvAPzDywStMFp4c?p=preview