タグ付けされた質問 「angularjs」

オープンソースのJavaScriptフレームワークであるAngularJS（1.x）に関する質問に使用します。Angular 2以降のバージョンではこのタグを使用しないでください。代わりに、[angular]タグを使用してください。

4
複数のtrにわたるAngular.jsのng-repeat
隠されたtrを使用するアプリケーションにAngular.jsを使用して、下のtdでtrを表示し、divを下にスライドすることにより、スライドアウト効果をシミュレートしています。このプロセスは、これらの行の配列を反復処理するときにknockout.jsを使用して素晴らしく機能しました<!-- ko:foreach -->。これは、両方のtr要素を使用できるためです。 angularの場合ng-repeat、html要素に適用する必要があります。つまり、標準の方法を使用してこれらの二重行を繰り返すことができないようです。これに対する私の最初の対応は、これらの二重trを表すディレクティブを作成することでしたが、ディレクティブテンプレートには単一のルート要素が必要ですが、2つ（<tr></tr><tr></tr>）あるため、不十分でした。 これをクラックしたng-repeatとAngularの経験がある人がこの問題を解決する方法を説明できれば、私は非常に感謝します。 （ng-repeattbodyへのアタッチはオプションですが、これは複数のtbodyを生成することにも注意する必要があります。標準のHTMLの場合はフォームが不適切であると想定していますが、間違っている場合は修正してください）
8
入力のngモデルのフィルター
テキスト入力があり、ユーザーがスペースを使用できるようにしたくないので、入力したすべての文字が小文字に変換されます。 ng-modelなどでフィルターを使用することは許可されていません。 ng-model='tags | lowercase | no_spaces' 私は自分のディレクティブを作成するだけに機能を追加することを見て$parsersと$formatters入力し、持っていた唯一の他の要素は更新されませんでしたng-modelそれをし。 現在入力している入力を変更するにはどうすればよいですか？ 私は基本的に、ここでStackOverflowの機能と同じように機能する「タグ」機能を作成しようとしています。
1
エンドツーエンドのテストにProtractorまたはKarmaを使用する必要がありますか？[閉まっている]
休業。この質問には、より焦点を当てる必要があります。現在、回答を受け付けていません。 この質問を改善してみませんか？質問を更新して、この投稿を編集するだけで1つの問題に焦点を当てます。 6年前休業。 この質問を改善する エンドツーエンドのテストにProtractorまたはKarmaを使用する必要がありますか？ Angular-seedはProtractor / Selenium WebDriver for E2Eを使用していますが、angular-phonecatチュートリアルではカルマを使用しています。 ユニットテストにはKarmaを、E2EにはProtractorを使用する必要があると読みましたが、これは問題ないようですが、他の開発者の意見を得るためにここでお願いしたいと思いました。
1
AngularJSで双方向フィルタリングを行う方法は？
AngularJSで実行できる興味深いことの1つは、特定のデータバインディング式にフィルターを適用することです。これは、たとえば、カルチャ固有の通貨やモデルのプロパティの日付形式を適用するのに便利な方法です。スコープに計算されたプロパティがあると便利です。問題は、これらの機能がどちらも双方向データバインディングシナリオでは機能しないことです。スコープからビューへの一方向データバインディングのみです。これは、他の点では優れたライブラリでの明らかな省略のようです-または何かが欠けていますか？ でKnockoutJS、私は私は、プロパティの値を取得するために呼び出され1、およびプロパティが設定されたときに呼び出されるものを関数のペアを指定することができ、読み取り/書き込み計算プロパティを、作成することができます。これにより、たとえば、カルチャ対応の入力を実装できます。ユーザーが「$ 1.24」と入力して、それをViewModelのフロートに解析し、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/） ユーザーが入力を開始すると、入力要素は非常に混乱します。プロパティを2つのプロパティに分割し、1つは解析されていない値用、もう1つは解析された値用に改善しました。 $scope.visibleProperty= 0.0; $scope.hiddenProperty = 0.0; $scope.$watch("visibleProperty", function (newValue, oldValue) { $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + 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 </h2> …
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
21
ブートストラップを使用してng-repeatデータを3列で分割する方法
私のコードでng-repeatを使用しています。ng-repeatに基づいて「n」個のテキストボックスがあります。テキストボックスを3列に揃えたいのですが。 これは私のコードです <div class="control-group" ng-repeat="oneExt in configAddr.ext"> {{$index+1}}. <input type="text" name="macAdr{{$index+1}}" id="macAddress" ng-model="oneExt.newValue" value=""/> </div>
2
AngularJS：送信とサーバー応答の間のすべてのフォームコントロールを無効にする
ユーザーが[保存]ボタンまたは[送信]ボタンをクリックしたときに、フォームコントロールを無効にする（または少なくともユーザーインタラクションで利用できないようにする）場合、どの方法が最適（かつ正しい）かというジレンマがあります。そして、データはネットワーク上を移動します。私はJQuery（これは悪です!!!）を使用したくないし、すべての要素を配列として（クラスまたは属性マーカーによって）クエリしたくありません。 cm-form-control「data-sent」と「data-processed」の2つの通知をサブスクライブするカスタムディレクティブですべての要素をマークします。次に、カスタムコードは2番目の通知をプッシュするか、Promiseを解決します。 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'; $scope.save …
12
templateUrlを使用したAngularJSディレクティブの単体テスト
templateUrl定義されているAngularJSディレクティブがあります。私はそれをジャスミンでユニットテストしようとしています。 私の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属性として使用するにはどうすればよいですか？
オブジェクトの配列があり、フィルターに基づいて要素の1つのプロパティに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'のサブジェクトへの2番目の入力をフィルター処理したいのですが、モデルをグレードにバインドしたくありません。学年が「C」の科目のタイトルにバインドします。 これは可能ですか？可能な場合、どのように行われますか？
121 angularjs 
9
入力フォーカスのテキストを選択
テキスト入力があります。入力がフォーカスを受け取ったら、入力内のテキストを選択します。 jQueryでは、次のようにします。 <input type="text" value="test" /> $("input[type=text]").click(function() { $(this).select(); // would select "test" in this example }); Angularの方法を試してみましたが、見つけたほとんどの例は、モーダルプロパティの変更を監視するディレクティブを処理しています。フォーカスを受け取る入力を監視するディレクティブが必要だと思います。どうすればいいですか？
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.