发表于: 2017-05-18 22:14:27
1 1064
今天完成的事情
1.熟悉插件
2.听老大讲课
明天的计划
1.接着做点啥吧
遇到的问题
1.首先是这个datepicker
我用的是ui-bootstrap的插件,一开始觉得可能超简单,后来发现自己官方文档都看不懂,最后总算弄出了点样子
首先是html
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="startTime" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="finishTime" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" max="" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
写了这么多其实就两个东西
js文件
var myApp = angular.module('myApp',['ui.bootstrap','ngAnimate']);
先注入ui-bootstrap还有ngAnimate
myApp.controller('datepickerController', function($scope) {
$scope.popup1 = {
opened:false
};
$scope.open1 = function() {
$scope.popup1.opened=true
};
$scope.popup2 = {
opened:false
};
$scope.open2 = function() {
$scope.popup2.opened=true
};
})
点击让各个标签中的opened改变,从而实现点击出现日期选择器
还有个问题就是要根据需要来设定每个日期选择器最大可选日期与最小可选日期
这个需要在标签里面添加 max 和 min来实现,其实在控制器里面也可以实现这个东西,但是那个鬼的dateopinion设置一直读取不到我想要给的值。
2.老大讲了MVC
关于这个,我在学angular初期是没怎么去想过的,但是随着用的越来越多,自己也会去想,有时候就是越想越迷糊,今天听课之后,大概的能把自己之前所想过的东西有个整合,对理解偏差的地方做了修改。
我的理解里面
module 数据
| | controller 逻辑
view 视图
controller里面只放业务逻辑,数据处理的东西一概扔到module里面,在controller里面只处理这些数据的结果。
还有一些题外话,就是对于之前,写一些功能,想到了就直接写下来,错了再一步步改,现在觉得,每一个步骤,用函数封装起来,出错了直接去找对应函数,方便,需要修改功能的时候,可以直接定位需要修改的部分,而且觉得一个函数最好只做一件事情,如果一个函数做两件以上的事情,这两件事情就难免会互相影响,修改其中一件事情,也会相应的要修改另外一件本来无关的事情,这样可能就是两件事情耦合了,把这两件事情拆分开来,写在两个独立函数内部,就算的上是比较简单的一步解耦吧。
收获
以上啊
评论