taiwoorogbangba taiwoorogbangba - 4 months ago 22
AngularJS Question

AngularJS pop up window

I'm currently working on an AngularJS project where user inputs from a drop down list and a text box on a page can be displayed on a dialog box or a pop up window. For instance, selecting option of Mr and entering a name which is then displayed on the dialog box as "You're Mr YourName." The dialog box should show up when the user clicks the submit button. Just a simple frontend application with no backend technology. How can this be done? Any help? Thanks.

HTML




<div>
<label>Pick a title:
<select ng-model="data. title">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
</select>
</label>




<div>
<label>Type your name:
<input type="text" ng-model=" data. test">
</label>
</div>




JS
angular.module("app", [])
.controller("ctrl", function($scope) {

$scope.data = {
title: "Mr",
text: "test"
}

});

Answer

if your whole purpose is only showing the dialog bx with the values than the below code will help you, for styling and other features you need to go for bootstrap modal and prompt.

html

<body ng-controller="MainCtrl">
<div>
<label>Pick a title:
<select ng-model="data. title">
  <option value="Mr">Mr</option>
  <option value="Mrs">Mrs</option>
</select>
</label>
</div>
<div>
<label>Type your name:
 <input type="text" ng-model="data.test">
</label>
</div>
<input type="submit" ng-click="info()">
</body>

controller.

$scope.data = {
               title: "Mr",
               test: ""
              }

$scope.info = function()
{
  alert("you are " + $scope.data.title + " " + $scope.data.test)
}

Fiddler: https://plnkr.co/edit/KBA4W4jLPBVX5tHJpWWL?p=preview

Comments