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

     

  • 相关阅读:
    vue使用Highcharts图表
    Laya 骨骼动画播放
    unity3d学习笔记
    unity学习笔记
    Laya本地存储对象,读取上来之后没有类方法了
    Laya2学习笔记
    Laya vscode f5断点调试开启
    fairyGUI学习笔记
    使用docker安装swoole环境
    docker学习笔记
  • 原文地址:https://www.cnblogs.com/itguliang/p/4408965.html
Copyright © 2020-2023  润新知