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

yduiuuwa  于 2022-10-31  发布在  Angular
关注(0)|答案(1)|浏览(183)

我想在单击单选按钮后动态地更改容器。我知道我可以使用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中所示的示例。)
谢谢你的好意!

2wnc66cl

2wnc66cl1#

第一个
您可以像这样在选中的单选按钮上隐藏显示容器

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

相关问题