阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Ionic 单选框操作

      ionic 单选框操作

      实例中,根据选中的不同选项,显示不同的值。

      HTML 代码

      <ion-header-bar class="bar-positive">
        <h1 class="title">当选按钮</h1>
      </ion-header-bar>
      
      <ion-content>
      
        <div class="list">
      
          <div class="item item-divider">
            选取的值为: {{ data.clientSide }}
          </div>
      
          <ion-radio ng-repeat="item in clientSideList"
                     ng-value="item.value"
                     ng-model="data.clientSide">
            {{ item.text }}
          </ion-radio>
      
          <div class="item item-divider">
            Serverside, Selected Value: {{ data.serverSide }}
          </div>
      
          <ion-radio ng-repeat="item in serverSideList"
                     ng-value="item.value"
                     ng-model="data.serverSide"
                     ng-change="serverSideChange(item)"
                     name="server-side">
            {{ item.text }}
          </ion-radio>
      
        </div>
      
      </ion-content>
      

      JavaScript 代码

      angular.module('ionicApp', ['ionic'])
      
      .controller('MainCtrl', function($scope) {
      
        $scope.clientSideList = [
          { text: "Backbone", value: "bb" },
          { text: "Angular", value: "ng" },
          { text: "Ember", value: "em" },
          { text: "Knockout", value: "ko" }
        ];
      
        $scope.serverSideList = [
          { text: "Go", value: "go" },
          { text: "Python", value: "py" },
          { text: "Ruby", value: "rb" },
          { text: "Java", value: "jv" }
        ];
      
        $scope.data = {
          clientSide: 'ng'
        };
      
        $scope.serverSideChange = function(item) {
          console.log("Selected Serverside, text:", item.text, "value:", item.value);
        };
      
      });
      

      css 代码:

      body {
        cursor: url('http://www.axihe.com/try/demo_source/finger.png'), auto;
      }
      
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录