AngularJSポップアップウィンドウ

私は現在AngularJSプロジェクトに取り組んでいます。このプロジェクトでは、ドロップダウンリストからのユーザー入力とページ上のテキストボックスをダイアログボックスまたはポップアップウィンドウに表示できます。たとえば、Mrのオプションを選択して名前を入力すると、ダイアログボックスに「You're Mr YourName」と表示されます。ユーザーが送信ボタンをクリックすると、ダイアログボックスが表示されます。バックエンド技術のない単純なフロントエンドアプリケーションです。これはどうすればできますか？どんな助け？ありがとう。AngularJSポップアップウィンドウ

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" 
} 

});

出典

2016-07-08 taiwoorogbangba

私はと考えているブートストラップ用アンギュラUIディレクティブ、特に[モーダル]（https://angular-ui.github.io/bootstrap/#/modal）をお勧めします後の正確な機能を提供します。 – Lex

あなたの全体の目的でのみ値を持つダイアログボックスを表示する場合は、以下のコードがお手伝いしますあなたがボーのために行く必要があるスタイリングと他の機能のためにotstrapモーダルとプロンプト。

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>

コントローラ。

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

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

フィドラー：https://plnkr.co/edit/KBA4W4jLPBVX5tHJpWWL?p=preview

出典

2016-07-08 18:04:06 Deep

AngularJSポップアップウィンドウ

答えて

関連する問題