解决angularjs WdatePicker ng-model的问题

假设我们在项目中需要用到WdatePicker以及angularjs，并有如下的代码：

<div>
 <div class="h4">ddd</div>
 <input class="form-control" type="text" ng-model="text.ddd"
 readonly="readonly"
 onClick="WdatePicker({dateFmt:'yyyy',lang:'zh-cn'})"
 style="width: 400px; cursor: pointer;" />
 </div>

这样的代码，问题就在于，当你需要进行提交的时候，你会发现$scope.text.ddd是没有值的。

解决方案是加一个onChange=""，代码变为如下：

<div>
 <div class="h4">ddd{{text.bbb}}</div>
 <input class="form-control" type="text" ng-model="text.ddd"
 readonly="readonly" onChange=""
 onClick="WdatePicker({dateFmt:'yyyy',lang:'zh-cn'})"
 style="width: 400px; cursor: pointer;" />
 </div>

是的，只要加入这个就可以了。当然，你可能会注意到还有一些变动的是，ddd{{text.bbb}}，我之所以这样写是为了解决一个疑惑的。这个疑惑就是，你加上onChange=""之后，哪怕你选择了日期，但是{{text.bbb}}也是取不出值来的，而且你输出一下$scope.text.ddd也还是undefined的，这个时候你可能会以为onChange=""无效。但是，其实不是这样的，当你提交数据时，你会发现它的确是被提交了的。

以上这篇解决angularjs WdatePicker ng-model的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS解决ng-if中的ng-model值无效的问题

    与其他指令一样,ng-if指令也会创建一个子级作用域,因此,如果在ng-if指令中添加了元素,并向元素属性增加 ng-model指令,那么ng-model指令对应的作用域属性子级作用域,而并非控制器注入的$scope作用域对象,这点在进行双向数据绑定时,需要引起注意. <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <scri

  • AngularJS 获取ng-repeat动态生成的ng-model值实例详解

    AngularJS 获取ng-repeat动态生成的ng-model值实例详解

    AngularJS 获取ng-repeat动态生成的ng-model值               最近做项目遇到了ng-model是ng-repeat动态生成的,ng-model="变量",什么变量,是未知的,所以你无法在$scope."变量"取到值,就算取到值也是其中一个值,这样的问题,经过百度一番查找找到解决方案,这里记录下,也行可以帮助到大家. 代码 html <div> <div class="modal-header"

  • angular ng-model 无法获取值的处理方法

    该问题是由angular使用jq日期插件导致的无法双向绑定 <input id="dateDayStart" ng-model="dateDayStart" /> 解决方法:重新绑定 setInterval(function () { $scope.$apply(function () { $scope.params.dateDayStart = document.getElementById('dateDayStart').value; }); },

  • 解决ng-repeat产生的ng-model中取不到值的问题

    最近遇到在ng-repeat产生的textarea中绑定ng-model后,在js中取不到ng-model值的问题. html的代码结构如下 <div class="ques-item hide1 show9a" id="q10"> <div class="ques-item-question"> 10.{{questions[9].questionContent}} </div> <div class=

  • 解决angularjs WdatePicker ng-model的问题

    假设我们在项目中需要用到WdatePicker以及angularjs,并有如下的代码: <div> <div class="h4">ddd</div> <input class="form-control" type="text" ng-model="text.ddd" readonly="readonly" onClick="WdatePicker({d

  • AngularJs Understanding the Model Component

    AngularJs Understanding the Model Component

    在angular文档讨论的上下文中,术语"model"可以适用于单一对象代表一个实体(例如,一个叫" phones"的model,它的值是一个电话数组.)或者作为应用的全部数据Model(所有实体). 在angular中,model可以是任意数据,可以通过angular的scope对象的属性来获取model.属性的名称是model的标识,值可以是任意javascript对象(包括数组和原始数据). javascript想成为model的唯一的条件是对象必须作为一个s

  • AngularJS的ng Http Request与response格式转换方法

    本文实例讲述了AngularJS的ng Http Request与response格式转换方法.分享给大家供大家参考,具体如下: angular作为Single Page Application推荐的交互方式当然是基于json的ajax调用.但今天要说的是当你不幸工作在一个遗留或者不可控制的服务上,而这服务是基于非json提交方式(或许是常规表单(form)提交,或者其他自定义数据格式),那么我们只能改变ng内部$http默认request/response格式转化方式. 所幸的是ng $htt

  • 解决angularJS中input标签的ng-change事件无效问题

    出现这个问题是因为input的type是file,这时如果用ng-change="()"是无效的. 解决方法:用onchange事件. <input onchange="angular.element(this).scope().change()" type="file"> $scope.change= function () { } 以上这篇解决angularJS中input标签的ng-change事件无效问题就是小编分享给大家的全

  • 快速解决angularJS中用post方法时后台拿不到值的问题

    用angularJS中的$http服务碰到了一个问题:运用$http.post方法向后台传递数据时,后台的php页面获取不到data参数传过来的值. 不论是这种姿势: $http.post( "1.php", { id: 1 }).success(function (data) { console.log(data); }); 还是这种姿势: $http({ method: 'POST', url: '1.php', data: { id: 1 } }).success(functio

  • 解决angularjs中同步执行http请求的方法

    如下所示: self.tableParams = new NgTableParams({}, { getData: function (params) { $http.post("rest/staff/page", $scope.req).success(function (data) { if (data != null && data != undefined) { $scope.staffs = data.data; params.total($scope.tot

  • 解决angularjs前后端分离调用接口传递中文时中文乱码的问题

    1.首先前端需要进行字符串加密两次 encodeURIComponent(encodeURIComponent(param)); 2.这里是以java后台为例需要进行一次解码 URLDecoder.decode("接受到的String类型参数","UTF-8") 示例如下: @RequestMapping("looked_list") public Map lookedList(@RequestParam Map map) throws Unsu

  • 解决angularjs service中依赖注入$scope报错的问题

    控制台错误提示 ionic.bundle.js:26794 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- DutylogService http://errors.angularjs.org/1.5.3/$injector/unpr?p0=<ion-nav-view name="tab-dutylog" class="view-container tab-conte

  • 解决Angularjs异步操作后台请求用$q.all排列先后顺序问题

    最近我在做angularjs程序时遇到了一个问题 1.页面有很多选择框,一个选择框里面有众多的选择项,和一个默认选定的项,像下面这样(很多选择框,不只一个): 2.众多的选项要从后台接口得到,默认项从另一个后台接口得到,这就需要$promise.then()操作 3.而多个$promise.then()属于异步操作,先后顺序不是一定的,如果先得到众多选项,后得到默认值,显示就没有问题,如果顺序颠倒,默认项就会为空,这不是我想要的 4.这就需要众多选项的后台请求都获得完,才去后台请求默认值, 就用

  • 在React框架中实现一些AngularJS中ng指令的例子

    首先设定一段Angularjs代码的ng-class: <i class="header-help-icon down" ng-class="{up:showMenu}"></i> 比较容易理解的Angularjs ng-class设置样式代码,那我们使用React怎么去实现它呢? 首先在state设置一个变量比如: isShowLoginMenu,在不同场景改变它的值,然后在绑定在class样式上面 <i className={&qu

随机推荐