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事件监控来看看输出的是什么

     

  • 相关阅读:
    SpringBoot项目中遇到的BUG
    关于Unsupported major.minor version 52.0报错问题解决方案
    spring官网上下载历史版本的spring插件,springsource-tool-suite
    构建微服务:Spring boot 入门篇
    Spring Cloud 入门教程(一): 服务注册
    SpringCloud是什么?
    ubuntu下查看windows的 txt 文件乱码
    Ubuntu 14.04 LTS中怎样安装fcitx中文输入法
    eclipse调用jni
    Ubuntu 12.04 分区方案(仅供参考)
  • 原文地址:https://www.cnblogs.com/itguliang/p/4408965.html
Copyright © 2011-2022 走看看