问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

angularJS根据选择的radio显示对应的p

头像
rannie
    5529

    有三个radio分别对应三个p，选择radio1显示p1,选择radio2显示p2，以此类推，其他的p隐藏。
    <div>

    <div>
    <input type='radio'>radio1
    <input type='radio'>radio2
    <input type='radio'>radio3
</div>
<div>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

    </div>

    我知道大概是用ng-if,ng-model,但是不知道具体咋使用，有大神可以讲讲吗，在线等，小弟不胜感激，抱拳。

    angularjs
    阅读 2.7k
    1 个回答
    得票最新
    头像
    xialeistudio
      21.5k42658
      ✓ 已被采纳
      <!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
    <meta charset="UTF-8">
    <meta name="fragment" content="!">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/angular.js/1.5.3/angular.js"></script>
</head>
<body ng-controller="Main">
<div>
    <input type='radio' value="1" ng-model="sex"> V1
    <input type='radio' value="2" ng-model="sex"> V2
</div>
{{sex}}
<div>
    <p ng-if="sex==1">p1</p>
    <p ng-if="sex==2">p2</p>
</div>
<script>
  angular.module('App', []).controller('Main', [
    '$scope', function($scope) {
      $scope.sex = 1;
    }]);
</script>
</body>
</html>

      效果

      clipboard.png

      clipboard.png

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题