zoukankan      html  css  js  c++  java
  • 【AngularJs】---实现select的ng-options

    controller

    .controller('MainController', function($scope, $http, $ionicModal, $timeout) {
            var post = {};
            $http.get("data/themeData.json")
                .success(function(response) {
                    $scope.themeData = response.themeData;
                });
    
            $ionicModal.fromTemplateUrl('templates/post.html', {
                scope: $scope
            }).then(function(modal) {
                $scope.modal = modal;
            });
    
            $scope.postShow = function() {
                post = $scope.post = {};
                $scope.modal.show();
            };
    
            $scope.cancelPost = function() {
                $scope.modal.hide();
            };
    
            $scope.doPost = function() {
                console.log('doPost-----');
                console.log(post);
                $timeout(function() {
                    $scope.cancelPost();
                }, 1000);
            };
    
        })

    html

    <ion-modal-view>
    <form name="post_form">
      <ion-header-bar>
          <button class="button  button-icon  icon ion-ios-arrow-back" ng-click="cancelPost()"></button>
          <h1 class="title">发帖</h1>
          <button class="button  button-icon  icon ion-forward" ng-disabled="post_form.$invalid" ng-click="doPost()"></button>
      </ion-header-bar>
    
      <ion-content>
          <div class="list">
            <label class="item item-input myLabel">
              <input type="text" placeholder="标题" ng-model="post.title" required/>
            </label>
            <label class="item item-input myLabel2">
              <select class="mySelect col"  ng-model="post.kmForumCategoryId" ng-options="theme.id as theme.name for theme in themeData" required>
        <!-- 添加了id属性作为option的value -->
    <option value="">选择主题分类</option> </select> </label> <label class="item item-input myLabel"> <textarea class="post_content" placeholder="内容" ng-model="post.content" required></textarea> </label> </div> </ion-content> </form> </ion-modal-view>

    实现的DOM

    <select class="mySelect col ng-pristine ng-untouched ng-invalid ng-invalid-required" ng-model="post.kmForumCategoryId" ng-options="theme.id as theme.name for theme in themeData" required="">
      <
    option value="">选择主题分类</option>
      <
    option value="0" label="主题111">主题111</option>
      <
    option value="1" label="主题222">主题222</option>
      <
    option value="2" label="有没问题">有没问题</option>
      <
    option value="3" label="测试112">测试112</option>
      <
    option value="4" label="你好">你好</option>
      <
    option value="5" label="主题">主题</option>
      <
    option value="6" label="测试000">测试000</option>
    </
    select>

    可以用ng-change事件监控来看看输出的是什么

     

  • 相关阅读:
    18文件权限管理
    17用户身份管理
    16Shell脚本—计划任务服务程序
    15Shell脚本—流程控制
    14Shell脚本—判断语句
    13Shell脚本—编写简单脚本
    12Vim在系统配置中的应用示例
    11Vim文本编辑器
    10重要的环境变量
    09命令行通配符和转义字符
  • 原文地址:https://www.cnblogs.com/itguliang/p/4408965.html
Copyright © 2011-2022 走看看