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

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

22
リクエストペイロードではなくフォームデータとしてデータを投稿するにはどうすればよいですか?
以下のコードでは、AngularJS $httpメソッドがURLを呼び出し、xsrfオブジェクトを「リクエストペイロード」として送信します(Chromeデバッガーのネットワークタブで説明)。jQuery $.ajaxメソッドは同じ呼び出しを行いますが、xsrfを「フォームデータ」として送信します。 AngularJSにリクエストペイロードではなくフォームデータとしてxsrfを送信させるにはどうすればよいですか? var url = 'http://somewhere.com/'; var xsrf = {fkey: 'xsrf key'}; $http({ method: 'POST', url: url, data: xsrf }).success(function () {}); $.ajax({ type: 'POST', url: url, data: xsrf, dataType: 'json', success: function() {} });


6
パーシャルとテンプレートの複雑な入れ子
私の質問は、AngularJSアプリケーションでテンプレート(パーシャルとも呼ばれる)の複雑なネストを処理する方法に関係しています。 私の状況を説明する最良の方法は、私が作成した画像を使用することです: ご覧のように、これは多くのネストされたモデルを持つかなり複雑なアプリケーションになる可能性があります。 アプリケーションは単一ページであるため、DOMに属性を持つdiv要素を含むindex.htmlをロードしng-viewます。 サークル1の場合、適切なテンプレートをにロードするプライマリナビゲーションがあることがわかりますng-view。これを行う$routeParamsには、メインアプリモジュールに渡します。これが私のアプリにあるものの例です: angular.module('myApp', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when("/job/:jobId/zones/:zoneId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/zone_edit.html' }). when("/job/:jobId/initial_inspection", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/initial_inspection.html' }). when("/job/:jobId/zones/:zoneId/rooms/:roomId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/room_edit.html' }) }]); サークル2では、に読み込まれるテンプレートにng-view追加のサブナビゲーションがあります。このサブナビゲーションは、その下の領域にテンプレートをロードする必要があります-ng-viewはすでに使用されているため、これを実行する方法がわかりません。 追加のテンプレートを1番目のテンプレートに含めることができることはわかっていますが、これらのテンプレートはすべてかなり複雑になります。アプリケーションを更新しやすくし、子にアクセスするためにロードする必要がある親テンプレートに依存しないようにするために、すべてのテンプレートを別々に保持したいと思います。 サークル3では、状況がさらに複雑になっていることがわかります。サブナビゲーションテンプレートには、独自のテンプレートをサークル4の領域にロードする必要がある2番目のサブナビゲーションが含まれる可能性があります。 AngularJSアプリを構造化して、テンプレートのこのような複雑な入れ子を処理しながら、テンプレートをすべて互いに分離したままにするにはどうすればよいですか?

11
AngularJS ngClass条件付き
ng-class条件付きであることを表現する方法はありますか? たとえば、私は次のことを試しました: <span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span> このコードの問題obj.value1は、何であれ、クラステストが常に要素に適用されることです。これを行う: <span ng-class="{test: obj.value2}">test</span> obj.value2真の値に等しくない限り、クラスは適用されません。これで、最初の例でこの問題を回避できます。 <span ng-class="{test: checkValue1()}">test</span> どこcheckValue1の関数は次のようになります。 $scope.checkValue1 = function() { return $scope.obj.value === 'somevalue'; } 私はこれがどのように機能するng-classことになっているのか疑問に思っています。これと同様のことをしたいカスタムディレクティブも作成しています。しかし、私は式を見る方法を見つけることができません(そして、多分それは不可能であり、それがこのように機能する理由です)。 ここに私が意味することを示すplnkrがあります。
499 html  css  angularjs 

11
条件に基づいて特定のルートにリダイレクトする
次のように構成されたログインビューとメインビューを持つ小さなAngularJSアプリを書いています。 $routeProvider .when('/main' , {templateUrl: 'partials/main.html', controller: MainController}) .when('/login', {templateUrl: 'partials/login.html', controller: LoginController}) .otherwise({redirectTo: '/login'}); 私のLoginControllerはユーザーとパスの組み合わせをチェックし、これを反映する$ rootScopeにプロパティを設定します。 function LoginController($scope, $location, $rootScope) { $scope.attemptLogin = function() { if ( $scope.username == $scope.password ) { // test $rootScope.loggedUser = $scope.username; $location.path( "/main" ); } else { $scope.loginError = "Invalid user/pass."; } } …
493 angularjs  ngroute 

12
ng-repeat:単一フィールドによるフィルター
ng-repeatを使用して繰り返し使用している製品の配列があります。 <div ng-repeat="product in products | filter:by_colour"> これらの製品を色でフィルタリングします。フィルターは機能していますが、製品名/説明などに色が含まれている場合、フィルターを適用しても製品は残ります。 すべてのフィールドではなく、配列のカラーフィールドにのみ適用するようにフィルターを設定するにはどうすればよいですか?

10
AngularJS:非同期データでサービスを初期化する
非同期データで初期化したいAngularJSサービスがあります。このようなもの: myModule.service('MyService', function($http) { var myData = null; $http.get('data.json').success(function (data) { myData = data; }); return { setData: function (data) { myData = data; }, doStuff: function () { return myData.getSomeData(); } }; }); 何かが戻ってくるdoStuff()前に呼び出そうとするとmyData、nullポインタ例外が発生するため、これは明らかに機能しません。こことここで尋ねられた他のいくつかの質問を読んでわかる限り、私にはいくつかのオプションがありますが、どれも非常にきれいに見えません(おそらく私は何かを見逃しています): 「run」を使用したセットアップサービス 私のアプリを設定するときにこれを行います: myApp.run(function ($http, MyService) { $http.get('data.json').success(function (data) { MyService.setData(data); }); }); 次に、私のサービスは次のようになります。 myModule.service('MyService', function() …

19
AngularJSのコントローラー間で通信する正しい方法は何ですか?
コントローラ間で通信する正しい方法は何ですか? 私は現在、次のような恐ろしいファッジを使用していますwindow: function StockSubgroupCtrl($scope, $http) { $scope.subgroups = []; $scope.handleSubgroupsLoaded = function(data, status) { $scope.subgroups = data; } $scope.fetch = function(prod_grp) { $http.get('/api/stock/groups/' + prod_grp + '/subgroups/').success($scope.handleSubgroupsLoaded); } window.fetchStockSubgroups = $scope.fetch; } function StockGroupCtrl($scope, $http) { ... $scope.select = function(prod_grp) { $scope.selectedGroup = prod_grp; window.fetchStockSubgroups(prod_grp); } }
473 scope  angularjs 

10
Angular ng-repeat Error「リピーターの重複は許可されていません。」
私はそのようにカスタムフィルターを定義しています: <div class="idea item" ng-repeat="item in items" isoatom> <div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2"> .... </div> </div> ご覧のように、フィルターが使用されているng-repeatは別のng-repeat内にネストされています フィルターは次のように定義されています。 myapp.filter('range', function() { return function(input, min, max) { min = parseInt(min); //Make string input int max = parseInt(max); for (var i=min; i<max; i++) input.push(i); return input; }; }); …

8
Angularディレクティブ-コンパイル、コントローラー、プリリンク、ポストリンクをいつ、どのように使用するか[終了]
閉まっている。この質問はスタックオーバーフローのガイドラインを満たしていません。現在、回答を受け付けていません。 この質問を改善してみませんか? Stack Overflowのトピックとなるように質問を更新します。 5年前休業。 Angularディレクティブを記述する場合、次の関数のいずれかを使用して、DOMの動作、コンテンツ、およびディレクティブが宣言されている要素の外観を操作できます。 コンパイル コントローラ プレリンク ポストリンク どの関数を使用するべきかについては、いくつかの混乱があるようです。この質問の対象は次のとおりです。 ディレクティブの基本 さまざまな関数を宣言する方法は? ソーステンプレートとインスタンステンプレートの違いは何ですか? ディレクティブ関数はどの順序で実行されますか? これらの関数呼び出しの間で他に何が起こりますか? 関数の性質、すべきこと、すべきでないこと コンパイル コントローラ プレリンク ポストリンク 関連する質問: 指令:コントローラ対コンパイル対リンク。 angular.jsディレクティブを定義するときの「コントローラー」、「リンク」、および「コンパイル」関数の違い。 angularjsでのコンパイルとリンクの機能の違いは何ですか。 AngularJSディレクティブのプリコンパイル要素とポストコンパイル要素の違いは何ですか?。 Angular JSディレクティブ-テンプレート、コンパイル、またはリンク?。 Angular jsディレクティブのリンク後とリンク前。

18
AngularJS 1.2 $ injector:modulerr
1.07の代わりに角度1.2を使用すると、次のコードは無効になります。なぜですか? 'use strict'; var app = angular.module('myapp', []); app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); $routeProvider. when('/', { templateUrl: 'part.html', controller: 'MyCtrl' }). otherwise({ redirectTo: '/' }); } ]); 問題はインジェクター構成部分(app.config)にあります: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=muninn&p1=Error%…eapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0rc1%2Fangular.min.js%3A31%3A252) 私が正しく覚えているなら、この問題はangular 1.1.6から始まった。

14
Angular.jsでRequire.jsを使用することには意味がありますか?[閉まっている]
休業。この質問は意見に基づいています。現在、回答を受け付けていません。 この質問を改善してみませんか?この投稿を編集して、事実と引用で回答できるように質問を更新してください。 5年前休業。 私はAngular.jsの初心者で、Backbone.jsとの違いを理解しようとしています... Backboneを使用しているときに、Require.jsでパッケージの依存関係を管理するために使用していました。Angular.jsで同じことをすることには意味がありますか?

8
AngularJSのng-optionsを使用したselectの操作
私は他の投稿でそれについて読みましたが、それを理解することができませんでした。 私はアレイを持っています、 $scope.items = [ {ID: '000001', Title: 'Chicago'}, {ID: '000002', Title: 'New York'}, {ID: '000003', Title: 'Washington'}, ]; それを次のようにレンダリングしたい: <select> <option value="000001">Chicago</option> <option value="000002">New York</option> <option value="000003">Washington</option> </select> また、ID = 000002のオプションを選択します。 selectを読んで試しましたが、理解できません。


8
フィルタリングされたng-repeatデータの長さを表示する方法
多くのオブジェクト(JSON形式)を含むデータ配列があります。この配列の内容として、次のことが想定されます。 var data = [ { "name": "Jim", "age" : 25 }, { "name": "Jerry", "age": 27 } ]; 今、私はこれらの詳細を次のように表示します: <div ng-repeat="person in data | filter: query"> </div ここでは、クエリは、ユーザーが表示されるデータを制限できる入力フィールドにモデル化されています。 今、私は表示している人/人の現在の数を表示する別の場所があります、すなわち Showing {{data.length}} Persons 私がやりたいのは、ユーザーが人を検索し、表示されたデータがクエリに基づいてフィルタリングされると、Showing...persons現在表示されている人の値も変化することです。しかし、それは起こっていません。フィルタリングされたデータではなく、常にデータの合計人数が表示されます-フィルタリングされたデータの数を取得するにはどうすればよいですか

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.