Questions tagged «angularjs»

用于有关开源JavaScript框架AngularJS（1.x）的问题。不要将此标签用于Angular 2或更高版本；而是使用[angular]标签。

4
跨多个tr的Angular.js ng-repeat
我将Angular.js用于通过隐藏trs通过显示tr并在下面的td中将div向下滑动来模拟滑出效果的应用程序。当遍历这些行的数组时，此过程可以使用kickout.js出色地工作，因为我可以<!-- ko:foreach -->在两个tr元素之间使用。 使用angular时，ng-repeat必须将其应用于html元素，这意味着我似乎无法使用标准方法来重复这些双行。我对此的第一个响应是创建一个表示这些double tr的指令，但是由于指令模板必须具有一个根元素，而我却有两个（<tr></tr><tr></tr>），所以未能达到要求。 如果任何具有ng-repeat和angular经验的人都可以解决这个问题，那么我将不胜感激。 （我还应该注意，附加ng-repeat到tbody是一个选项，但这会产生多个tbody，并且我认为这对于标准HTML来说是不好的形式，尽管如果我错了也可以纠正我）
8
在输入中对ng-model进行过滤
我有一个文本输入，不想让用户使用空格，所有键入的内容都将变为小写。 我知道我不允许在ng-model上使用过滤器。 ng-model='tags | lowercase | no_spaces' 我研究了创建自己的指令，但仅向其上添加的元素添加了功能$parsers，$formatters但未更新输入ng-model。 如何更改当前输入的内容？ 我实质上是在尝试创建“标签”功能，该功能与StackOverflow上的功能相同。
1
我应该使用量角器或业力进行端到端测试吗？[关闭]
已关闭。这个问题需要更加集中。它当前不接受答案。 想改善这个问题吗？更新问题，使其仅通过编辑此帖子来关注一个问题。 6年前关闭。 改善这个问题 我应该使用量角器或业力进行端到端测试吗？ Angular-seed正在使用Protractor / Selenium WebDriver进行E2E，但是angular-phonecat教程使用了业力。 我读到我应该使用Karma进行单元测试，使用Protractor进行E2E，这似乎还不错，但我想我想在这里征询其他开发人员的意见。
1
如何在AngularJS中进行双向过滤？
AngularJS可以做的有趣的事情之一是将过滤器应用于特定的数据绑定表达式，这是一种方便的方法，例如，应用区域性特定的货币或模型属性的日期格式。在范围上具有计算属性也很好。问题在于这些功能都不适用于双向数据绑定方案-从作用域到视图仅单向数据绑定。在一个本来不错的图书馆中，这似乎是一个明显的遗漏-还是我错过了什么？ 在KnockoutJS中，我可以创建一个读/写计算属性，该属性允许我指定一对函数，一个被调用以获取该属性的值，一个被设置为属性时被调用。例如，这使我可以实现文化意识的输入-允许用户键入“ $ 1.24”，然后将其解析为ViewModel的float，并在输入中反映出ViewModel的更改。 我可以找到与此最相似的东西是使用。$scope.$watch(propertyName, functionOrNGExpression);这允许我在$scope更改属性时调用一个函数。但这不能解决例如文化意识的输入问题。当我尝试$watched在$watch方法本身中修改属性时，请注意问题： $scope.$watch("property", function (newValue, oldValue) { $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue; $scope.property = Globalize.parseFloat(newValue); }); （http://jsfiddle.net/gyZH8/2/） 当用户开始输入时，输入元素会非常混乱。我通过将属性拆分为两个属性来改进它，一个用于未解析的值，另一个用于已解析的值： $scope.visibleProperty= 0.0; $scope.hiddenProperty = 0.0; $scope.$watch("visibleProperty", function (newValue, oldValue) { $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + …
14
如何使用$ state.go toParams和$ stateParams发送和检索参数？
我正在将AngularJS v1.2.0-rc.2与ui-router v0.2.0一起使用。我想将引荐来源网址状态传递给另一个状态，因此我使用的toParams方式$state.go如下： $state.go('toState', {referer: $state.current.name}); 根据文档，这应该$stateParams在toState控制器上填充，但它是undefined。我想念什么？ 我创建了一个小例子来演示： http://plnkr.co/edit/ywEcG1
14
控制器不是函数，未定义，但在全局定义控制器时
我正在使用angularjs编写示例应用程序。我在chrome浏览器上遇到以下错误。 错误是 错误：[ng：areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined 呈现为 参数“ ContactController”不是函数，未定义 码 <!DOCTYPE html> <html ng-app> <head> <script src="../angular.min.js"></script> <script type="text/javascript"> function ContactController($scope) { $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"]; $scope.add = function() { $scope.contacts.push($scope.newcontact); $scope.newcontact = ""; }; } </script> </head> <body> <h1> modules sample </h1> <div ng-controller="ContactController"> Email:<input type="text" ng-model="newcontact"> <button ng-click="add()">Add</button> <h2> Contacts …
13
在AngularJS中格式化日期时间
如何在AngularJS中正确显示日期和时间？ 下面的输出同时显示输入和输出，带有和不带有AngularJS日期过滤器： In: {{v.Dt}} AngularJS: {{v.Dt | date:'yyyy-MM-dd HH:mm:ss Z'}} 打印： In: 2012-10-16T17:57:28.556094Z AngularJS: 2012-10-16T17:57:28.556094Z 所需的显示格式为 2010-10-28 23:40:23 0400或2010-10-28 23:40:23 EST
2
AngularJS：禁用提交和服务器响应之间的所有表单控件
如果在用户单击某种“保存”或“提交”按钮期间要禁用表单控件（或至少使其无法与用户交互），我对最好（正确）的方法有什么困惑？和数据通过网络传输。我不想使用JQuery（这是邪恶的！！）并将所有元素查询为数组（通过类或属性标记），到目前为止，我的想法是： 用cm-form-control定制指令标记所有元素，这些指令将订阅2个通知：“数据已发送”和“数据已处理”。然后，自定义代码负责推送第二个通知或解决承诺。 使用promiseTracker（不幸地！）强制执行会产生极其愚蠢的代码，例如ng-show="loadingTracker.active()"。显然，并非所有元素都具有，ng-disabled并且我不想让用户ng-hide/show避免使用“跳舞”按钮。 硬着头皮仍然使用JQuery 有谁有更好的主意吗？提前致谢！ 更新： 字段集的想法确实可行。对于那些仍然想做同样的事情的人来说，这是一个简单的提琴。http: //jsfiddle.net/YoMan78/pnQFQ/13/ HTML： <div ng-app="myApp"> <ng-form ng-controller="myCtrl"> Saving: {{isSaving}} <fieldset ng-disabled="isSaving"> <input type="text" ng-model="btnVal"/> <input type="button" ng-model="btnVal" value="{{btnVal}}"/> <button ng-click="save()">Save Me Maybe</button> </fieldset> </ng-form> </div> 和JS： var angModule = angular.module("myApp", []); angModule.controller("myCtrl", function ($scope, $filter, $window, $timeout) { $scope.isSaving = undefined; $scope.btnVal = 'Yes'; …
12
使用templateUrl进行单元测试AngularJS指令
我有一个已templateUrl定义的AngularJS指令。我正在尝试与Jasmine进行单元测试。 根据此建议，我的Jasmine JavaScript如下所示： describe('module: my.module', function () { beforeEach(module('my.module')); describe('my-directive directive', function () { var scope, $compile; beforeEach(inject(function (_$rootScope_, _$compile_, $injector) { scope = _$rootScope_; $compile = _$compile_; $httpBackend = $injector.get('$httpBackend'); $httpBackend.whenGET('path/to/template.html').passThrough(); })); describe('test', function () { var element; beforeEach(function () { element = $compile( '<my-directive></my-directive>')(scope); angular.element(document.body).append(element); }); afterEach(function () …
4
从jquery $ .ajax到angular $ http
我有一段可以很好地跨源工作的jQuery代码： jQuery.ajax({ url: "http://example.appspot.com/rest/app", type: "POST", data: JSON.stringify({"foo":"bar"}), dataType: "json", contentType: "application/json; charset=utf-8", success: function (response) { console.log("success"); }, error: function (response) { console.log("failed"); } }); 现在，我试图将其转换为Angular.js代码，但没有成功： $http({ url: "http://example.appspot.com/rest/app", dataType: "json", method: "POST", data: JSON.stringify({"foo":"bar"}), headers: { "Content-Type": "application/json; charset=utf-8" } }).success(function(response){ $scope.response = response; }).error(function(error){ $scope.error = error; …
2
除非在$ scope中传递，否则AngularJS ng-include不包括视图
假设ngInclude可以走一条原始道路是错误的吗？我一直试图将我的设置ngInclude如下： <div ng-include src="views/header.html"></div> 这不起作用，但是如果我做这样的事情，它确实起作用。 // HeaderController app.controller('HeaderCtrl', function($scope){ $scope.templates = {[ template: { url: 'views/header.html' } ]}; $scope.template = $scope.templates[0].template; }); 在我的index.html中 <div ng-controller="HeaderCtrl"> <div ng-include src="template.url"></div> </div> 是否ngInclude仅排除超出范围的值？如果是这样，为什么要这样，而不是直接包含html部分。
6
AngularJs“ controller as”语法-澄清吗？
我从angularJS 阅读了有关以下内容的新语法controller as xxx 语法InvoiceController as invoice告诉Angular实例化控制器并将其保存在当前作用域的变量invoice中。 可视化 好的，所以$scope我的控制器中没有参数，并且控制器中的代码更加简洁。 但 我将不得不在视图中指定另一个别名 所以直到现在我都可以做： <input type="number" ng-model="qty" /> ....controller('InvoiceController', function($scope) { // do something with $scope.qty <--notice 现在我可以做： <input type="number" ng-model="invoic.qty" /> <-- notice ....controller('InvoiceController', function() { // do something with this.qty <--notice 题 这样做的目的是什么？从一个地方移走并添加到另一个地方？ 我将很高兴看到我在想什么。
8
如何使用AngularJS过滤数组并将过滤对象的属性用作ng-model属性？
如果我有一个对象数组，并且想将Angular模型绑定到基于过滤器的元素之一的属性，该怎么做？我可以用一个具体的例子更好地解释： HTML： <!DOCTYPE html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body ng-controller="MyCtrl"> <input ng-model="results.year"> <input ng-model="results.subjects.title | filter:{grade:'C'}"> </body> </html> 控制器： function MyCtrl($scope) { $scope.results = { year:2013, subjects:[ {title:'English',grade:'A'}, {title:'Maths',grade:'A'}, {title:'Science',grade:'B'}, {title:'Geography',grade:'C'} ] }; } JSBin：http：//jsbin.com/adisax/1/edit 我想将第二个输入过滤为具有'C'等级的主题，但是我不想将模型绑定到该等级；我想将其绑定到等级为“ C”的主题的标题。 这可能吗？如果可以，怎么做？
121 angularjs 
9
选择输入焦点上的文本
我有文字输入。当输入获得焦点时，我想选择输入内的文本。 使用jQuery，我可以这样： <input type="text" value="test" /> $("input[type=text]").click(function() { $(this).select(); // would select "test" in this example }); 我四处搜寻以尝试找到Angular方法，但是我发现的大多数示例都在处理一个指令，该指令正在监视模式属性的更改。我假设我需要一个指令来监视接收焦点的输入。我该怎么办？
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.