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

     

  • 相关阅读:
    Linux编程之自定义消息队列
    MVC5学习系列--Razor视图(一)
    JS将秒转换为 天-时-分-秒
    自己封装了一个EF的上下文类.,分享一下,顺便求大神指点
    VS2015企业版,社区版,专业版详细对比
    [干货来袭]C#6.0新特性
    WebApp上滑加载数据...
    用SignalR 2.0开发客服系统[系列5:使用SignalR的中文简体语言包和其他技术点]
    用SignalR 2.0开发客服系统[系列4:负载均衡的情况下使用SignalR]
    用SignalR 2.0开发客服系统[系列3:实现点对点通讯]
  • 原文地址:https://www.cnblogs.com/itguliang/p/4408965.html
Copyright © 2011-2022 走看看