私は個人的にはデータ操作が容易であることを好むAngularStrap modalsを使用することができます。
JS：
angular.module('app', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap'])
.config(function($modalProvider) {
angular.extend($modalProvider.defaults, {
html: true
});
})
.controller('mainCtrl', function($scope, $rootScope, $modal) {
$scope.selectedState = '';
$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
$scope.modal = {
title: "<strong>Example</strong>",
html: true,
show: true
};
$scope.get_change = function(value) {
$scope.selectedState = value;
}
});
HTML：
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-sanitize.min.js" data-semver="1.5.7"></script>
<script src="https://mgcrea.github.io/angular-strap/dist/angular-strap.js"></script>
<script src="https://mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://mgcrea.github.io/angular-strap/styles/libs.min.css">
<link rel="stylesheet" href="https://mgcrea.github.io/angular-strap/styles/docs.min.css">
</head>
<body ng-controller="mainCtrl">
<div class="col-md-6">
<button type="button" class="btn btn-md btn-primary" data-animation="am-flip-x" data-template-url="modal/docs/modal.demo.tpl.html" data-placement="center" bs-modal="modal">Open modal
</button>
<hr>
<span ng-bind="selectedState"></span>
</div>
</body>
</html>
<!-- Modal content
<div class="modal ng-scope center am-fade-and-scale" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1050; display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" ng-show="title">
<button type="button" class="close" aria-label="Close" ng-click="$hide()"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" ng-bind-html="title"></h4></div>
<div class="modal-body">
<div class="form-group">
<label><i class="fa fa-globe"></i> State</label>
<input type="text" class="form-control" ng-model="selectedState" bs-options="state for state in states" placeholder="Enter state" ng-change="get_change(selectedState)" bs-typeahead>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
-->
あなたはplnkrに完全なコードを確認することができます
は、ここでは、コードです。
の詳細については、のAngularStrapチェックhereです。
見てください：http://plnkr.co/edit/xyOSVrxLnAtSpjZ8kdlm?p=viewこの回答から：http://stackoverflow.com/questions/26570653/how-to-pass-form-data-from- angle-ui-bootstrap-modal-to-view – developer033
@ developer033-私の場合は少し異なる問題です。私はモーダルの中に入力ボックスをオートコンプリートしました。私はそれをモーダルからコントローラに渡す方法を見つけることはできません。名前入力ボックスを選択すると、オートコンプリートになります。 – Patrick
@ developer033-オートコンプリート入力フィールドの値を取得する方法を教えてください。すなわち名前を選択する。私は入力のこのタイプのためのプランナーでそれを見つけることができませんでした – Patrick