单击单选按钮时动态更改容器答案

【问题标题】：Dynamically change container when clicking radiobutton单击单选按钮时动态更改容器
【发布时间】：2018-05-11 18:53:12
【问题描述】：

我想在单击单选按钮后动态更改容器。我知道我可以使用 ng-model 和 value 轻松做到这一点。这是一个JSFiddle： http://jsfiddle.net/vDTRp/2/ 当您有一个小容器或只有一些文本时，它可以正常工作。但是如何使用存储在作用域中的巨大容器来做到这一点？

function MyCtrl($scope) {
    $scope.value[0]='<div>big container when clicking radiobutton 1</div>'
    $scope.value[1]='<div>big container when clicking radiobutton 2</div>'
    $scope.value[2]='<div>big container when clicking radiobutton 3</div>'
}

$scope.value[0] 得到了我的单选按钮 1 的容器，$scope.value[1] 得到了我的单选按钮 2 的容器，$scope.value[2] 得到了我的单选按钮 3 的容器。

HTML 应该如何动态地做到这一点？（通过“动态”，我的意思是单击单选按钮会更改容器，如 jsfiddle 中所示的示例。）

非常感谢！

【问题讨论】：

大容器有什么问题？你没有指定。
我会使用 ng-switch 并将模板逻辑保留在模板中，而不是将其放入 js 代码中。
好主意，我不知道这个指令！谢谢

标签： javascript angularjs button checkbox radio

【解决方案1】：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.number = '0';
    $scope.value = [];
  	$scope.value[0]='<div>big container when clicking radiobutton 1</div>';
    $scope.value[1]='<div>big container when clicking radiobutton 2</div>';
    $scope.value[2]='<div>big container when clicking radiobutton 3</div>';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="radio" ng-model="number" value="0">
<input type="radio" ng-model="number" value="1">
<input type="radio" ng-model="number" value="2">    
<hr> 
{{value[number]}}
</div>
</div>

您可以像这样在选定的单选按钮上隐藏显示容器

<div ng-controller="MyCtrl">
    <input type="radio" ng-model="number" value="0">
    <input type="radio" ng-model="number" value="1">
    <input type="radio" ng-model="number" value="2">    
    <hr> 
    {{value[number]}}
    <div ng-bind-html-unsafe="value[number]"></div> <--if you want bind html than use ng-bind-html-unsafe
</div>

然后像这样改变你的控制器

function MyCtrl($scope) {
    $scope.number = '0';
    $scope.value = [];
    $scope.value[0]='<div>big container when clicking radiobutton 1</div>'
    $scope.value[1]='<div>big container when clicking radiobutton 2</div>'
    $scope.value[2]='<div>big container when clicking radiobutton 3</div>'
    $scope.$watch('value', function(value) {
       console.log(value);
    });
}

【讨论】：