【Angular1学习Demo】单选按钮和多选按钮-选择数据

最新推荐文章于 2021-10-20 17:55:22 发布

smart_dream

最新推荐文章于 2021-10-20 17:55:22 发布

阅读量594

点赞数

分类专栏： AngularJs 文章标签： angular example

本文链接：https://blog.csdn.net/xiaoxiong_jiaxin/article/details/89521904

版权

AngularJs 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

效果图：

html文件：复制后可直接运行

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>angularJs</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  <style>
    .container {
      margin-top: 100px;
    }
    
    .checkbox-dg label {
      position: relative;
      display: inline-block;
      margin-right: 30px;
      padding: 15px;
      border: 1px solid #ccc;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      vertical-align: middle;
      cursor: pointer
    }
    
    .checkbox-dg input[type=radio], .checkbox-dg input[type=checkbox] {
      margin: 0;
      opacity: 0;
      display: none
    }
    
    .checkbox-dg input[type=radio]:checked + label,
    .checkbox-dg input[type=checkbox]:checked + label {
      border: 1px solid #6cbbee;
      background-color: #ddd
    }
    
    .round label {
      border-radius: 50%
    }
  </style>
  <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div class="container" ng-controller="myCtrl as vm">
  <div class="row form-group"><b>单选：</b></div>
  <div class="row form-group">
    <ul class="nav navbar-nav navbar-left">
      <li ng-repeat="item in vm.languageTypes track by $index">
        <div class="checkbox-dg round">
          <input id="checkbox{{item}}" type="radio" name="languageTypes" value="{{item.name}}"
                 ng-model="vm.languageTypeValue">
          <label for="checkbox{{item}}">{{item.name}}</label>
        </div>
      </li>
    </ul>
  </div>
  <div class="row form-group">选中单项语言：{{vm.languageTypeValue}}</div>
  <hr>
  <div class="row form-group"><b>多选：</b></div>
  <div class="row form-group">
    <ul class="nav navbar-nav navbar-left">
      <li ng-repeat="item in vm.languageTypes track by $index">
        <div class="checkbox-dg round">
          <input id="checkLanguageTypes{{item}}" type="checkbox" name="checkLanguageTypes"
                 ng-model="item.checked" ng-change="getChoosedLanguages()">
          <label for="checkLanguageTypes{{item}}">{{item.name}}</label>
        </div>
      </li>
    </ul>
  </div>
  <div class="row form-group">选中多种语言-值：{{vm.choosedLanguages}}</div>
  <div class="row form-group">选中多种语言-名：{{vm.choosedLanguagesName}}</div>
</div>

<script>
  angular.module('myApp', [])
    .controller('myCtrl', function ($scope) {
      var vm = this;
      vm.languageTypes = [
        {value: 'MandarinChinese', name: '中文'},
        {value: 'Cantonese', name: '粤语'},
        {value: 'English', name: '英语'},
        {value: 'Japanese', name: '日语'},
        {value: 'French', name: '法语'},
        {value: 'German', name: '德语'},
        {value: 'Russian', name: '俄语'},
        {value: 'Korean', name: '韩语'}];
      $scope.getChoosedLanguages = function () {
        vm.choosedLanguages = vm.languageTypes.filter(i => i.checked).map(j => j.value);
        vm.choosedLanguagesName = vm.languageTypes.filter(i => i.checked).map(j => j.name);
      }
    });
</script>

</body>
</html>

smart_dream

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
【Angular1学习Demo】单选按钮和多选按钮-选择数据

效果图：html文件：复制后可直接运行<!DOCTYPE html><html ng-app="myApp"><head> <meta charset="utf-8"> <title>angularJs</title> <link rel="stylesheet" href="htt...
复制链接

扫一扫