标签: angularjs

如何在角度材质中使<img>和<md-card>响应?

我通过循环使用<md-card>和<image>标签显示动态内容.我的输出在平板电脑或移动屏幕上没有响应,显示滚动条而不是下一行.我的代码出了什么问题,如何让它响应?

<p>Show Menus</p>
<div layout="row" layout-margin >
  <md-card  ng-repeat="menu in sampleMenus">
   <md-card>
   <img src="http://placehold.it/350x150" class="md-card-image" alt="image caption"/>
    <md-card-content >
     <h2>{{menu.displayName}}</h2>
     <p>{{menu.type}}</p>
    </md-card-content>
       </md-card >
  </md-card>
</div>
Run Code Online (Sandbox Code Playgroud)

截图: 桌面视图

![Tab View和mobile几乎相同

responsive-design angularjs material-design angular-material

7
推荐指数
2
解决办法
3万
查看次数

使用angular标记列表中的已修改元素

我想同步数据,因此我有一个包含当前状态的数据对象.当这个改变时,我想在对象上设置一个属性,以便我可以在同步时通过它进行过滤.对象结构是:

data = {  
type1: [  
  {a:"a", b:"b"},...  
]  
type2: [  
  {c:"c", d:"d"},...  
]  
}  
Run Code Online (Sandbox Code Playgroud)

例如,如果data.type1 [0] .a ="test"将完成,我想将modified:true添加到对象,以便它将是

{a:"test", b:"b", modified:true}
Run Code Online (Sandbox Code Playgroud)

我已经尝试过$ watch(data,function(),true)但是我找不到如何看到哪个对象被更改并且搜索给定的数据对象将是一个很大的开销.$ watchcollection(只是在寻找添加/删除时)也没有给出索引.
有没有办法找出哪个对象被改变了?或者是否有其他图书馆可以很好地做到这一点?

谢谢

编辑:
我创建了一个jsfiddle:https://jsfiddle.net/yfo8xwah/

javascript synchronization angularjs

7
推荐指数
1
解决办法
251
查看次数

如何覆盖角度类型=数字验证?

我正在撰写一份指令,以验证瑞典社会安全号码(personnummer).要在这样的输入元素上使用:

<input type="text" ng-model="pnr" pnrvalidator />
Run Code Online (Sandbox Code Playgroud)

瑞典社会安全号码的格式为yyyymmdd-nnnn例如19121212-1212

只要我使用,我的指令就可以使用type="text".但由于我希望在移动浏览器上使用数字键盘,然后我改为type="number":

<input type="number" ng-model="pnr" pnrvalidator />
Run Code Online (Sandbox Code Playgroud)

然后我的验证器只有在我的输入中没有输入破折号( - )时才有效,例如191212121212.如果我输入19121212-1212那么它不是有效数字.并且ng-invalid ng-invalid-number类被添加到我的input元素中

当我编写我的指令时,我遵循文档如何修改内置验证器https://docs.angularjs.org/guide/forms 但它似乎不适用于type=number验证,或者我是否错过了什么?我使用角度1.3(和1.4).

我的指令代码:

angular.module('example').directive('pnrvalidator', function(){
return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {


    var validatePnr = function(inputString){
        /*
        * My validation logic here. Removed for this example
        */

    };


    ctrl.$validators.number = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }
        if (validatePnr(viewValue)) {
          // it …
Run Code Online (Sandbox Code Playgroud)

forms validation angularjs

7
推荐指数
1
解决办法
2066
查看次数

在ui-grid AngularJs中重新显示隐藏列

我在我的一个项目中使用ui-grid,其中一个要求是隐藏/显示网格中的列.隐藏列工作正常但是如何重新显示隐藏列?

经过一段时间的搜索,我发现在ng-grid中有showColumnMenu,它提供了隐藏它后显示列的能力,看到我发现的这个例子

$scope.gridOptions = {
data: 'myData',
columnDefs: [{
                field: "id",
                visible: false
            },{
                field: "name",
                displayName : "name"
            },{
                field: "age",
                displayname: "age",

            }] ,
multiSelect: false,
showGroupPanel: true,
selectedItems: [],
showColumnMenu: true };
Run Code Online (Sandbox Code Playgroud)

,但在使用showColumnMenu的ui-grid中不起作用.

我想知道是否有人知道如何显示隐藏的列.

谢谢,

angularjs angular-ui-grid

7
推荐指数
1
解决办法
1万
查看次数

如何在角度js中解析字符串中的html标签

在控制器中我有一个变量说$ scope.question.

$scope.question = "Hi this is <br/> book";
Run Code Online (Sandbox Code Playgroud)

在html页面中访问此变量,如{{question}}.

<div class="question">
        1. {{question}}
</div>
Run Code Online (Sandbox Code Playgroud)

我想要输出换行...但它显示为字符串...如何解析html标签.

angularjs

7
推荐指数
1
解决办法
1万
查看次数

在服务器上配置心跳超时,心跳间隔和关闭超时

我有一个node.js服务器,我使用socket.io进行服务器和客户端之间的实时通信.我观察到,如果移动客户端(使用Ionic Framework)突然断开连接,而不让服务器知道它,则套接字可以存活数小时(或永久).我已阅读并查看了他们的文档,他们有类似的选项 pingInterval, pingtimeout, heartbeat interval, heartbeat timeout, close timeout.

如何在服务器上配置这些值?

哪些值已被弃用?

这是我的代码.

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
io.set('heartbeat interval', 5000); 
io.set('heartbeat timeout', 8000);
io.set('timeout', 5000);
io.on('connection', function(socket){...}
Run Code Online (Sandbox Code Playgroud)

这些似乎都不起作用.任何帮助或指导都非常感谢.

PS:当客户端断开连接时,我正在拼接我的集合的套接字,当客户端告诉服务器他们想要优雅地断开连接时,它工作得很好.

node.js express socket.io angularjs ionic-framework

7
推荐指数
1
解决办法
1323
查看次数

如何列出模板缓存中的所有内容?

我无法弄清楚模板缓存中的内容.当我谷歌时,我发现的只有:https://docs.angularjs.org/api/ng/service/ $ templateCache我正在寻找有关所有可用方法的文档,但找不到它.但我真的想知道的是如何列出templateCache中的所有键.怎么做的?

angularjs

7
推荐指数
2
解决办法
3786
查看次数

如何从项目中删除Chutzpah到不在测试资源管理器中显示结果?

如何从项目中删除Chutzpah到不在测试资源管理器中显示结果?

我做了一个演示项目来学习Chutzpah并为VS2013安装它.现在在我的另一个项目中,我不使用Chutzpah而是使用Karma来测试Angularjs测试用例,但仍然测试资源管理器将Angularjs单元测试显示为失败测试,​​如何从测试资源管理器中删除angularjs测试用例?我只想在测试资源管理器中运行后端Csharp单元测试.

请尽快帮帮我

asp.net unit-testing chutzpah angularjs karma-runner

7
推荐指数
1
解决办法
398
查看次数

Angular:有选择地编译模板

我知道这ng-non-bindable允许给定元素及其子元素不被编译为模板.它似乎是根据需要在整个模板中添加的.有没有办法告诉Angular不处理给定的元素,但是"戳洞"并允许处理选定的子元素?例如,我希望能够做到这样的事情:

<div ng-non-bindable>
    <div>{{2+2}}</div>
    <div ng-bindable>{{2+2}}</div>
</div>
Run Code Online (Sandbox Code Playgroud)

并输出:

{{2 + 2}}

4

据我所知,即使它存在,ng-non-bindable也不会ng-bindable被允许处理.但是,是否存在任何允许像我所表达的模板方法的方法?

为了更加彻底,我的理想解决方案不会处理任何Angular,直到找到它ng-bindable,而不仅仅是花括号表达式.例如:

<div ng-non-bindable>
    <div ng-repeat="n in [1,2,3]">{{n+2}}</div>
    <div ng-bindable ng-repeat="n in [1,2,3]">{{n+2}}</div>
</div>
Run Code Online (Sandbox Code Playgroud)

会导致:

{{N + 2}}

3

4

五

javascript templates angularjs

7
推荐指数
1
解决办法
176
查看次数

来自$ routeChangeStart的URL在angularjs路由中的params

怎么可能URL从路由参数中获取哈希片段$routeChangeStart.

$scope.$on('$routeChangeStart', function (event, next, current) {
  // trying to get the url hash fragment from <next> param here
  // e.g. to_url_function(next) -> '/my_path/1'
});
Run Code Online (Sandbox Code Playgroud)

接收URL hash片段很容易使用,$locationChangeStart但这对我来说不是一个选择.

angularjs angularjs-routing

7
推荐指数
1
解决办法
2万
查看次数