ラジオボタンをクリックするとコンテナが動的に変更されます

Question

ラジオボタンをクリックした後、コンテナを動的に変更したいと思います。私は、モデルと価値を使って簡単にやり遂げることができます。 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.

これを動的に行うにはどうすればよいですか？ （「動的に」ラジオボタンをクリックすると、jsfiddleに表示されている例のようにコンテナが変更されます）

ありがとうございました！

Answer 1

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

 
function MyCtrl($scope) { 
 
    $scope.number = '0'; 
 
    $scope.value = []; 
 
    \t $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> 

ように選択されたRadioButtonの皮ショーのコンテナで行い、巨大に問題が何であるかを、この

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); 
    }); 
}