我希望这段代码能够纵向和横向集中内容.它就是这样,但是一旦我使窗口变小(移动尺寸),文本的(h1和p)对齐就会变为左边.
我错过了非常基本的东西吗？我可以说它text-center有效,但我不想自己添加任何CSS样式.
angular.module('app', ['ngMdIcons', 'ngMaterial']);<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://login.persona.org/include.js"></script>
<script src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script src="https://code.angularjs.org/1.4.0/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.5.0/angular-material-icons.min.js"></script>
</head>
<body layout="column" ng-app="app">
<div layout="row" flex layout-align="center center">
<div layout="column" layout-align="center">
<h1>Welcome to Dreamland!</h1>
<md-button class="md-hue-2 md-raised md-primary" >
<h1 class="md-display-1">Login</h1>
</md-button>
<p class="md-caption">This web site uses your membership with the given email address.</p>
</div>
</div>
</body>
</html>所以看起来我可以通过以下方式更改空的背景颜色md-checkbox:
md-checkbox .md-icon {
background: red;
}
但我无法改变已检查的背景md-checkbox.我试着玩:checked,::before,::after...但没有成功.
我该怎么办？
我在电子应用程序中使用angularjs(1.x)和angular-material.我md-select在视图中有两个s,当我尝试在Windows中使用它时一切正常.但是当我在OS X中使用它时,md-select第一次点击后停止工作.我点击它然后打开项目列表,但是如果我md-select再次点击它,它就不再显示项目列表了.值得注意的是,如果我点击第一个md-select,第二个也md-select停止工作.
检查html,我可以看到,md-select有两个子元素:md-select-value和div(md-select-menu-container).单击并选择任何项目后,md-select-menu-container消失.也许它与问题有关,但第二个md-select仍然有一个md-select-menu-container我无法打开它.
即使尝试了一个简单的md-select没有任何选项,它仍然只在第一次点击时打开.
<md-select ng-model="vm.test">
</md-select>
任何人都知道为什么会这样吗？
我会把我的代码放在这里,但我认为这个bug在我项目的其他地方.因为如果我md-select在角度材料的演示页面中尝试s,它会按预期工作.
我的项目是在github,所以任何人都可以尝试:https: //github.com/jradesenv/controle-projeto
更新:
我已经创建了一个带有nodejs express的简单服务器来托管角度应用程序,它在chrome和safari上完美运行.它似乎只是一个电子的错误.我注意到它不仅是md选择,而且md-dialogs和md-toast也有一些奇怪的延迟打开和关闭,只在电子中运行.
谢谢!
我想在我的下一个项目中使用Angular Material.https://material.angularjs.org
我没有找到任何关于它支持哪些浏览器的文档.任何人都知道它内部如何运作以及期待什么？
从我理解的flexcss属性,例如IE <10不支持.你知道Angular材料,有没有使用没有flexcss的后备设计？
我正在尝试构建自定义指令,以便我在调查中显示问题.因为我有多种类型的问题,所以我考虑创建单个指令并根据问题类型更改它的模板.
我的指示:
directive('question', function($compile) {
var combo = '<div>COMBO - {{content.text}}</div>';
var radio = [
'<div>RADIO - {{content.text}}<br/>',
'<md-radio-group layout="row" ng-model="content.answer">',
'<md-radio-button ng-repeat="a in content.answers track by $index" ng-value="a.text" class="md-primary">{{a.text}}</md-radio-button>',
'</md-radio-group>',
'</div>'
].join('');
var input = [
'<div>INPUT - {{content.text}}<br/>',
'<md-input-container>',
'<input type="text" ng-model="content.answer" aria-label="{{content.text}}" required md-maxlength="10">',
'</md-input-container>',
'</div>'
].join('');
var getTemplate = function(contentType) {
var template = '';
switch (contentType) {
case 'combo':
template = combo;
break;
case 'radio':
template = radio;
break;
case 'input':
template = input;
break; …我正在使用AngularJS Material,我想md-colors=""基于表达式应用值,与表达式的使用方式相同ng-class="".我无法让这个工作.
这是一个例子:
<md-button md-colors="{background:'accent-900-0.43' : mode == 'development'}" ng-click="setMode('development')">
development
</md-button>
如果条件mode=='development'为真,则所需的输出是md按钮将采用重音-900背景颜色.
可以用这种方式使用md-colors吗？
我使用md-virtual-repeat实现了无限水平滚动.当我向右滚动时,每次需要时它会获取25条记录.
<md-virtual-repeat-container flex md-orient-horizontal>
<div md-virtual-repeat="item in $ctrl.infiniteItems" md-on-demand>
{{ item.date }}
</div>
</md-virtual-repeat-container>
基本上它是一个水平的日期列表(包含其他信息),您可以滚动.滚动到将来的日期.工作良好.
现在,我想滚动到过去日期的左侧.
我正在寻找一种从中间开始的方式(今天的日期是).我已尝试md-top-index通过控制器上的值进行设置,但在从服务器获取第一页后,它会重置为较低的数字.
<md-virtual-repeat-container flex md-orient-horizontal md-top-index="$ctrl.topIndex">
<div md-virtual-repeat="item in $ctrl.infiniteItems" md-on-demand>
{{ item.date }}
</div>
</md-virtual-repeat-container>
如何配置md-virtual-repeat-container并md-virtual-repeat允许向左和向右滚动？
更新:这是一个带有Codepen的沙箱,我希望能够容纳一个向左滚动的按钮.https://codepen.io/christiaanwesterbeek/pen/pLRQgg
Update2:设置md-top-index为某个正整数允许在两个方向上滚动.但是在角材料部位给出的例子md-top-index不是无限滚动.我的问题的解决方案是md-top-index无限滚动的地方.
infinite-scroll angularjs angularjs-ng-repeat angularjs-material
我有一个带有 md-require-match=true 和验证消息的自动完成控件（Angular Material version 1.1.2）
<md-autocomplete required
md-no-cache="true"
md-select-on-match = "true"
md-selected-item="vm.selectedItem"
md-search-text="vm.searchText"
md-items="country in vm.querySearch(vm.searchText)"
md-item-text="country.nm"
md-min-length="2"
md-selected-item-change="vm.updateOrgCountry(country.cd)"
md-require-match = "true"
md-input-name="countryField"
md-match-case-insensitive = "true"
md-floating-label="Country">
<md-item-template>
<span md-highlight-text="vm.searchText" md-highlight-flags="^i">{{country.nm}}</span>
</md-item-template>
<md-not-found>
No Countries matching "{{vm.searchText}}" were found.
</md-not-found>
<div ng-messages="orgForm.countryField.$error">
<div ng-message="required"></div>
<div ng-message="md-require-match">Country not found.</div>
</div>
</md-autocomplete>
当我第一次进入控件并开始输入时，一切都按预期工作。如果我没有从列表中选择一个项目，然后离开控件，我会收到“未找到国家/地区”错误消息。
但是，如果我返回控件并再次开始输入，则每次按下按键后都会收到“未找到国家/地区”错误消息，直到我从列表中选择了某些内容。我不希望出现这种行为，因为用户在输入数据时应该会看到错误。
有没有办法将自动完成控件配置为仅在控件失去焦点时验证匹配？
请看看这个codepen
只要你单击UseDummy2 btn,它只会更改md-tabs重复的变量,但我会松开该$scope.selectedIndex值.将$scope.selectedIndex被复位为0,并选择第一选项卡.
即使在更改$ scope.lineDirections后,如何维护选定的选项卡？
我尝试过使用$ rootScope.selectedIndex但仍然无法正常工作.
我的目标是拥有一个单一的日期和时间模型。
不幸的是，我还没有为 AngularJS Material 找到稳定的日期时间选择器组件，所以我使用了两个共享相同模型的元素：标准md-datepicker和常规input type="time"
<md-input-container>
<md-datepicker ng-model="ctrl.myDateTime" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
<md-input-container>
<input ng-model="ctrl.myDateTime" type="time">
</md-input-container>
<span>Date and time chosen: {{ctrl.myDateTime}}</span>
首先，我选择日期。选择日期后，ctrl.myDateTime获取00:00:00显示在span. 然后我选择时间。设置时间后，它span也会正确显示。
这里的问题是：每次input type="time" 失去焦点（如onblur），由于某种原因时间分数被重置为00:00:00，但input会继续显示用户的值。
这就是我需要帮助的地方。我唯一想到的是，如果input没有包装，md-input-container那么时间只会重置一次，如果我再次更改它，失去的焦点不会重置时间。
如何避免这种情况？
要重现的代码示例：https : //codepen.io/mih-kopylov/pen/KKMxgBK