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

     

  • 相关阅读:
    JDBC遇到向ORACLE数据库表执行插入操作时,报错“列在此处不允许”
    关于对称加密和非对称加密以及签名,认证和证书的理解
    .net framework 各版本区别
    数据库设计三大范式
    业务系统设计
    修改 Windows 服务器默认远程端口3389
    iis读取不到本地证书问题 提示已经导入成功
    HTTPS 建立连接的详细过程
    使用ServiceStack构建Web服务
    转-微信支付(公众号支付JSAPI)
  • 原文地址:https://www.cnblogs.com/itguliang/p/4408965.html
Copyright © 2011-2022 走看看