<table> <tbody> <tr> <td> <a ng-click="incrementMinutes()"> <span></span> </a> </td> <td> </td> <td> <a ng-click="incrementSeconds()"> <span></span> </a> </td> <td> </td> </tr> <tr> <td ng-class="{'has-error': invalidMinutes}"> <input type="text" ng-model="minutes" ng-change="updateMinutes()" ng-mousewheel="incrementMinutes()" ng-readonly="readonlyInput" maxlength="3"> </td> <td>:</td> <td ng-class="{'has-error': invalidSeconds}"> <input type="text" ng-model="seconds" ng-change="updateSeconds()" ng-mousewheel="incrementSeconds()" ng-readonly="readonlyInput" maxlength="2"> <td> <!-- preview column --> <td> <span ng-show="validity"> {{ previewTime(minutes, seconds) }} </span> </td> </tr> <tr> <td> <a ng-click="decrementMinutes()"> <span></span> </a> </td> <td> </td> <td> <a ng-click="decrementSeconds()"> <span></span> </a> </td> <td> </td> </tr> </tbody> </table>
测试代码(即前面截图dialog的源代码)：
<div> <h3>Highlight on <span>{{ movieName }}</span></h3> </div> <div> <div> <div> <h4>Start Time:</h4> <minute-second-picker ng-model="startTime" validity="startTimeValidity"></minute-second-picker> </div> <div> <h4>End Time:</h4> <minute-second-picker ng-model="endTime" validity="endTimeValidity"></minute-second-picker> </div> </div> <div> <div> Tags: </div> <div> <tags model="tags" src="s as s.name for s in sourceTags" options="{ addable: 'true' }"></tags> </div> </div> </div> <div> <button ng-click="ok()" ng-disabled="!startTimeValidity || !endTimeValidity || durationIncorrect(endTime, startTime)">OK</button> <button ng-click="cancel()">Cancel</button> </div>
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：