Question

在选择选项

时显示模态窗口有一些问题

HTML

<!DOCTYPE html>
<html ng-app="myApp">
<body>
    <div ui-view></div>
</body>

</html>

app控制器

angular.module('myApp', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
            $urlRouterProvider.otherwise('/');
            $stateProvider
            .state('home',{
                url: '/',
                templateUrl: 'contacts.html',
                controller: 'myCtrl'
        })
    }])

家庭控制器

angular.module('myApp', [])
.controller('myCtrl', function($http, $scope) {
  $http.get('test.json').success(function (data) {
     $scope.selected = data;
  });
});

contacts.html

<select ng-model="selectedRegion" data-ng-options="location for location in selected.regions">
    <option value="">Region</option>
</select>
<select ng-model="selectedCountry" data-ng-options="place for place in selected.countries[selectedRegion]">
    <option value="">Country</option>
</select>
        {{selectedRegion}}

如何在选择相关区域或国家/地区之后创建可以显示的模态窗口，例如{{selectedRegion}}？请帮忙，我试着注入[＆＃39; ui.bootstrap＆＃39;]，然后点按按钮就可以了。但如何选择呢？感谢

这里是Plunk

Answer 1

从你给出的插件中可以做一些工作。

将angular.module('myApp', [])替换为 home.js

angular.module('myApp')

在国家/地区列表中添加ng-change。
在改变时，我们将打开一个模态

<强> Plunker

为模态

添加了ui.bootstrap作为模块依赖项

AngularJS，ui-router和bootstrap模式

1 个答案: