文章/答案/技术大牛

发布

社区首页 >问答首页 >在模态中使用单选按钮更改元素的类(角用户界面-引导:从模态对话框窗口检索值)

问在模态中使用单选按钮更改元素的类(角用户界面-引导:从模态对话框窗口检索值)
EN

Stack Overflow用户

提问于 2014-12-01 07:51:05

回答 1查看 1.9K关注 0票数 1

我使用一个模态对话框和单选按钮来更改元素的类。课程包括主题1、主题2和主题3。我尝试过使用ng类指令，但这是不可能的，因为我需要为单选按钮提供一个相等的ng模型。

使用{{主题}在模式对话框中，我将得到按钮的值。在模态对话框之外，它不工作。

即使在对话结束后，我也可以换课。但是如何在我的ModalInstanceCtrl中做到这一点呢？你有小费吗？

<h1 ng-model="theme">The new class: {{theme}}</h1>

角度UI模式对话框

<form name="myForm" ng-controller="NewInvoiceCtrl">                         
    <div class="btn-group btn-theme">
        <label class="btn btn-default btn-theme-label"  ng-model="theme" btn-radio='"theme-1"'>Light</label>
        <label class="btn btn-default btn-theme-label"  ng-model="theme" btn-radio='"theme-2"'>Dark</label>
        <label class="btn btn-default btn-theme-label"  ng-model="theme" btn-radio='"theme-3"'>Grey</label>
        {{theme}}
    </div>
   </form>

var ModalInstanceCtrl = function($scope, $modalInstance, items) {
    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };
// Change Design
    $scope.selectDesign = function() {
        $modalInstance.dismiss('cancel');           


    };
 };

angularjs

angularjs-directive

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-12-01 10:24:06

在模式对话框中使用{{theme}，我将得到按钮的值。在模态对话框之外，它不工作。

在主窗口中，您可以获得在对话框窗口中选择的内容，如下所示：

index.html：

<!DOCTYPE html>
<html>

<head>
  <!-- For html5 (default is UTF-8) -->
  <meta charset="UTF-8"> 
  <!-- For Bootstrap -->
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap -->

  <title>Test</title>

  <!-- Bootstrap3 -->
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <!-- app.css -->
  <link href="app.css" rel="stylesheet">
</head>

<body ng-app="myApp">

<div ng-controller="MainWindowCtrl">
  <button class="btn btn-default" ng-click="open()">Open modal dialog window</button>
  <div ng-show="main.theme">Selection from the modal dialog was: {{main.theme}}</div>
</div>

<!-- Angular 1.3.2 -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

<!-- Angular UI-Bootstrap -->
<script src="angular-ui-bootstrap-0.12.js"></script>

<!-- app.js -->
<script src="app.js"></script>

</body>
</html>

app.js：

var app = angular.module("myApp", ['ui.bootstrap']);

app.controller('MainWindowCtrl', ['$scope', '$modal', function($scope, $modal) {

  $scope.open = function() {

    var dialogWindow = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'DialogWindowCtrl',
    });

    dialogWindow.result.then(function(selectedTheme) {
      $scope.main = {
        theme: selectedTheme
      };
    });

  };

}]);

app.controller('DialogWindowCtrl', ['$scope', '$modalInstance',  function($scope, $modalInstance) {

  var dialogWindow = $modalInstance;
  //Set default value... 
  //ng-clicks in the dialog window change this value:
  $scope.dialog = {
    theme: 'theme1'
  };

  $scope.ok = function () {
    dialogWindow.close($scope.dialog.theme);  //***PASS DATA TO MAIN WINDOW**** 
  };

  $scope.cancel = function () {
    dialogWindow.dismiss('cancel');
  };

}]);

从一个模态对话框中检索两个值：

(还设置一个默认活动按钮，并激活单击的按钮。)

index.html：

<!DOCTYPE html>
<html>

<head>
  <!-- For html5 (default is UTF-8) -->
  <meta charset="UTF-8"> 
  <!-- For Bootstrap -->
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap -->

  <title>Test</title>

  <!--Bootstrap3 -->
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <!-- app.css -->
  <link href="app.css" rel="stylesheet">
</head>

<body ng-app="myApp">

<div ng-controller="MainWindowCtrl">
  <button class="btn btn-default" ng-click="open()">Open modal dialog window</button>
  <div ng-show="main_data.theme">Theme from the modal dialog was: {{main_data.theme}}</div>
  <div ng-show="main_data.border">Border from the modal dialog was: {{main_data.border}}</div>
</div>

<!-- Angular 1.3.2 -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

<!-- Angular UI-Bootstrap 0.12 -->
<script src="angular-ui-bootstrap-0.12.js"></script>

<!-- app.js -->
<script src="app.js"></script>
</body>
</html>

app.js：

var app = angular.module("myApp", ['ui.bootstrap']);

app.controller('MainWindowCtrl', ['$scope', '$modal', function($scope, $modal) {

  $scope.open = function() {

    $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'DialogWindowCtrl',
    })

    .result.then(function(dialog_data) {
      $scope.main_data = dialog_data;
      //equivalent to: $scope.main_data = {theme: 'selected theme', border: 'selected border'}
    });

  };

}]);

app.controller('DialogWindowCtrl', ['$scope', '$modalInstance',  function($scope, $modalInstance) {

  var dialogWindow = $modalInstance;

  $scope.dialog_data = {
    theme: 'theme1',
    border: 'solid'
  };

  $scope.setTheme = function(theme) {
    $scope.dialog_data.theme = theme;
  }

  $scope.ifThemeIs = function(theme) {
    return $scope.dialog_data.theme === theme;
  }

  $scope.setBorder = function(border) {
    $scope.dialog_data.border = border;
  }

  $scope.ifBorderIs = function(border) {
    return $scope.dialog_data.border === border;
  }

  $scope.ok = function () {
    dialogWindow.close($scope.dialog_data);  //***PASS DATA TO MAIN WINDOW***
  };

  $scope.cancel = function () {
    dialogWindow.dismiss('cancel');
  };

}]);

myModalContent.html：

<div class="modal-header">
  <h3 class="modal-title">I'm a modal!</h3>
</div>

<div class="modal-body">
  <h4>Theme:</h4>
  <div class="btn-group btn-theme">
    <button class="btn btn-default btn-theme-label" 
           ng-click="setTheme('theme1')"
           ng-class="{active: ifThemeIs('theme1')}">Light</button> 
    <button class="btn btn-default btn-theme-label"
           ng-click="setTheme('theme2')"
           ng-class="{active: ifThemeIs('theme2')}">Dark</button>
    <button class="btn btn-default btn-theme-label" 
           ng-click="setTheme('theme3')"
           ng-class="{active: ifThemeIs('theme3')}">Grey</button>
  </div>
  <div>Current theme choice: {{dialog_data.theme}}</div>

  <h4>Border:</h4>
  <div class="btn-group btn-theme">
    <button class="btn btn-default btn-theme-label" 
           ng-click="setBorder('solid')"
           ng-class="{active: ifBorderIs('solid')}">Solid</button>
    <button class="btn btn-default btn-theme-label" 
           ng-click="setBorder('dashed')"
           ng-class="{active: ifBorderIs('dashed')}">Dashed</button>
  </div>
  <div>Current border choice: {{dialog_data.border}}</div>
</div>

<div class="modal-footer">
  <button class="btn btn-primary" ng-click="ok()">OK</button>
  <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27223878

复制

相似问题

问在模态中使用单选按钮更改元素的类(角用户界面-引导:从模态对话框窗口检索值)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在模态中使用单选按钮更改元素的类(角用户界面-引导:从模态对话框窗口检索值)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在模态中使用单选按钮更改元素的类(角用户界面-引导:从模态对话框窗口检索值)
EN