ng-model not updating inside Modal
11,850
Solution 1
you should use:
$parent.email
<input type="text" ng-model="$parent.email" id="email" placeholder="Enter email" />
Solution 2
As huan feng said, you can use '$parent' because directive has it's own isolated scope. For your 'select' the simplest solution is to use something like that:
<select ng-model="$parent.client" ng-change="changeClient()" ng-options="item for item in clientList">
But, it could be better to use your model in a little bit different way. Create your 'clientInfo' object with email and clien as properties. JS:
.controller('MainCtrl', function ($scope) {
$scope.clientInfo = {};
$scope.clientInfo.email="[email protected]";
$scope.showModal = false;
$scope.toggleModal = function(){
$scope.showModal = !$scope.showModal;
};
$scope.buttonClicked=function(){
alert("hello1");
alert($scope.clientInfo.email);
alert($scope.clientInfo.client);
}
$scope.clientList=["300","600","900"]
$scope.clientInfo.client = $scope.clientList[0];
$scope.changeClient = function() {
selectedValue=$scope.clientInfo.client;
alert(selectedValue);
};
});
And HTML:
<div ng-controller="MainCtrl" class="container">
<h1>Modal example</h1>
<button ng-click="toggleModal()" class="btn btn-default">Open modal</button>
<modal title="Login form" visible="showModal">
<div>
<select ng-model="clientInfo.client" ng-change="changeClient()" ng-options="item for item in clientList">
<label for="email">Email address</label>
<input type="text" ng-model="clientInfo.email" id="email" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Password" />
</div>
<button type="submit" ng-click="buttonClicked()" class="btn btn-default">Submit</button>
</modal>
</div>
![RAHUL DEEP](https://lh5.googleusercontent.com/-EoopRcdFsrM/AAAAAAAAAAI/AAAAAAAAADg/e3acxffHp44/photo.jpg?sz=256)
Author by
RAHUL DEEP
Updated on June 19, 2022Comments
-
RAHUL DEEP about 2 years
ng-model which i am assigning is controller can be seen inside modal.But when i am updating the data inside the modal,the $scope variable is not updating. Also dropdown is not working whose value i have defined in my controller. Do i need to make changes in directive.
<div ng-controller="MainCtrl" class="container"> <h1>Modal example</h1> <button ng-click="toggleModal()" class="btn btn-default">Open modal</button> <modal title="Login form" visible="showModal"> <div> <select ng-model="client" ng-change="changeClient()" ng-options="item in clientList"> <label for="email">Email address</label> <input type="text" ng-model="email" id="email" placeholder="Enter email" /> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" id="password" placeholder="Password" /> </div> <button type="submit" ng-click="buttonClicked()" class="btn btn-default">Submit</button> </modal> </div>
CONTROLLER CODE
var mymodal = angular.module('mymodal', []); mymodal.controller('MainCtrl', function ($scope) { $scope.email="[email protected]"; $scope.showModal = false; $scope.toggleModal = function(){ $scope.showModal = !$scope.showModal; }; $scope.buttonClicked=function(){ alert("hello1"); alert($scope.email); alert($scope.client); } $scope.clientList=["300","600","900"] $scope.client=$scope.clientList[0]; $scope.changeClient = function() { selectedValue=$scope.client; alert(selectedValue); }; }); mymodal.directive('modal', function () { return { template: '<div class="modal fade">' + '<div class="modal-dialog">' + '<div class="modal-content">' + '<div class="modal-header">' + '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' + '<h4 class="modal-title">{{ title }}</h4>' + '</div>' + '<div class="modal-body" ng-transclude></div>' + '</div>' + '</div>' + '</div>', restrict: 'E', transclude: true, replace:true, scope:true, link: function postLink(scope, element, attrs) { scope.title = attrs.title; scope.$watch(attrs.visible, function(value){ if(value == true) $(element).modal('show'); else $(element).modal('hide'); }); $(element).on('shown.bs.modal', function(){ scope.$apply(function(){ scope.$parent[attrs.visible] = true; }); }); $(element).on('hidden.bs.modal', function(){ scope.$apply(function(){ scope.$parent[attrs.visible] = false; }); }); } }; });
Have a Look-JsFiddle Link