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

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


16
AngularJSエラー: '引数' FirstCtrl 'は関数ではなく、未定義です'
同じ質問がここで何度か尋ねられたことに気付いたので、試してみましたが解決しませんでした。 私はこのチュートリアルをeggheadビデオでフォローしています。 しかし、「コントローラー」および「コントローラー間でのデータの共有」のセクションに到達すると、それを機能させることができません。 Chromeで実行すると、コンソールに次のエラーが表示されます。 「引数「FirstCtrl」は関数ではないため、未定義です」 何が悪いのか本当にわかりません。コードはチュートリアルのものと同じです。 HTML <!DOCTYPE html> <html ng-app> <head> <title>AngularJS Tutorials: Controllers</title> <link rel="stylesheet" href="mystyle.css"> <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script> </head> <body> <div ng-app=""> <div ng-controller="FirstCtrl"> <h1> {{data.message + " world"}}</h1> <div class="{{data.message}}"> Wrap me in a foundation component </div> </div> </div> <script type="text/javascript" src="main.js"></script> </body> </html> main.js function FirstCtrl($scope){ …

5
angularjsの条件付きng-include
angularJSで条件付きでng-includeを行うにはどうすればよいですか? たとえば、変数xがに設定されている場合にのみ、何かを含めたいと思いますtrue。 <div ng-include="/partial.html"></div>

10
プロパティによるAngularJSの並べ替え
私がやろうとしていることは、いくつかのデータをプロパティでソートすることです。これは私が働いたはずの例ですが、うまくいきません。 HTML部分: <div ng-app='myApp'> <div ng-controller="controller"> <ul> <li ng-repeat="(key, value) in testData | orderBy:'value.order'"> {{value.order}}. {{key}} -> {{value.name}} </li> </ul> </div> </div> JSパート: var myApp = angular.module('myApp', []); myApp.controller('controller', ['$scope', function ($scope) { $scope.testData = { C: {name:"CData", order: 1}, B: {name:"BData", order: 2}, A: {name:"AData", order: 3}, } }]); …

2
$ httpパラメータの取得が機能しない
これが機能しない理由を誰かが知っていますか? $http .get('accept.php', { source: link, category_id: category }) .success(function (data, status) { $scope.info_show = data }); これは機能します: $http .get('accept.php?source=' + link + '&category_id=' + category) .success(function (data, status) { $scope.info_show = data });

4
angularjsで、応答が$ httpリクエストから来るまで待つ方法は?
複数のページでRESTfulサービスからのデータを使用しています。だから私はそのために角度工場を使用しています。そのため、サーバーからデータを1回取得する必要があり、その定義されたサービスでデータを取得するたびに取得しました。グローバル変数のように。これがサンプルです: var myApp = angular.module('myservices', []); myApp.factory('myService', function($http) { $http({method:"GET", url:"/my/url"}).success(function(result){ return result; }); }); 私のコントローラーでは、このサービスを次のように使用しています: function myFunction($scope, myService) { $scope.data = myService; console.log("data.name"+$scope.data.name); } 私の要件に応じて、それは私にとってはうまくいきます。しかし、ここでの問題は、ウェブページにリロードすると、サービスが再び呼び出され、サーバーを要求することです。「定義されたサービス」に依存する他の関数が実行されると、「何か」が未定義のようなエラーが発生します。したがって、サービスが読み込まれるまでスクリプトで待機したいと思います。どうやってやるの?とにかくそれはangularjsでそれをしますか?

1
式のAngular Lazyワンタイムバインディング
AngularJSには、バージョン1.3.0-beta.10以降の新機能、「レイジーワンタイムバインディング」があります。 単純な式の前にを付けて::、式が最初に評価された後に角度を停止するように角度を指定できます。与えられた一般的な例は次のようなものです: <div>{{::user.name}}</div> 次のような式の同様の構文はありますか? <div ng-if="user.isSomething && user.isSomethingElse"></div> <div ng-class="{classNameFoo: user.isSomething}"></div>

9
ng-modelを使用して日付をフォーマットする方法は?
次のように定義された入力があります <input class="datepicker" type="text" ng-model="clientForm.birthDate" /> これは、ページの他の場所に表示されるようになっています。 <tr> <th>Birth Date</th> <td>{{client.birthDate|date:'mediumDate'}}</td> </tr> ページが読み込まれると、誕生日はのように適切にフォーマットされますDec 22, 2009。私は私の内部を見るときしかし、<input>次のように示されていますTue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time)、私はJSのレンダリング方法です推測されDateた文字列などのオブジェクトを。 まず、Angularで日付をの<input>ように表示するにはどうすればよい12/22/2009ですか?属性|filters内に適用できないようng-modelです。 次に、日付を編集するとすぐに、元の形式のままでも、(内の<td>)私の他のテキストは|dateフィルターを適用しなくなったように見えます。入力テキストボックスのフォーマットに一致するようにフォーマットを突然変更します。|dateモデルが変更されるたびにフィルターを適用するにはどうすればよいですか? 関連する質問: onchangeでのみ起動するようにディレクティブを取得するにはどうすればよいですか? ディレクティブの引数にアクセスする方法は?
93 angularjs 

7
angularjsでイベントをトリガーした要素にアクセスする方法は?
私のウェブアプリでは、BootstrapとAngularJSの両方を使用しています。2つを一緒に動作させるのに少し問題があります。 属性を持つ要素があります data-provide="typeahead" <input id="searchText" ng-model="searchText" type="text" class="input-medium search-query" placeholder="title" data-provide="typeahead" ng-change="updateTypeahead()" /> またdata-source、ユーザーがフィールドに入力したときに属性を更新したいと思います。関数updateTypeaheadは正しくトリガーされますが$('#searchText')、AngularJSの方法ではなくjQueryの方法であるを使用しない限り、イベントをトリガーした要素にアクセスできません。 AngularJSを古いスタイルのJSモジュールで動作させる最良の方法は何ですか。

3
AngularJSシード:JavaScriptを個別のファイルに入れる(app.js、controllers.js、directives.js、filters.js、services.js)
私はアプリケーションを構築するために山形シードテンプレートを使用しています。最初に、すべてのJavaScriptコードを単一のファイルに入れましたmain.js。このファイルには、モジュール宣言、コントローラー、ディレクティブ、フィルター、サービスが含まれています。アプリケーションはこのように正常に動作しますが、アプリケーションがより複雑になるため、スケーラビリティとメンテナンス性が心配です。Angular-seedテンプレートにはこれらのファイルごとに個別のファイルがあることに気付いたので、コードを単一のmain.jsファイルからこの質問のタイトルに記載されている他の各ファイルに配布しようとしましたapp/jsが、angularのディレクトリで見つかりました-シードテンプレート。 私の質問は、アプリケーションを機能させるために依存関係をどのように管理するのですか?既存の文書が見つかりました。ここでは例の各番組に、単一のJavaScriptソース・ファイルを指定したので、非常にこの点では明らかではありません。 私が持っているものの例は: app.js angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.controllers']); controllers.js angular.module('myApp.controllers', []). controller('AppCtrl', [function ($scope, $http, $filter, MyService) { $scope.myService = MyService; // found in services.js // other functions... } ]); filters.js angular.module('myApp.filters', []). filter('myFilter', [function (MyService) { return function(value) { if (MyService.data) { // test to ensure service is loaded …

1
AngularJS:ngInclude vsディレクティブ
いつディレクティブを使用するのか、ngincludeを使用する方が適切なのはよくわかりません。この例を見てみましょう。私はpassword-and-confirm-input-fields.html、パスワードを入力して確認するためのhtml という部分を持っています。私は、signup-pageとchange-password-pageの両方でこれを使用しています。これらの2つのページにはそれぞれコントローラーがあり、部分的なhtmlには専用コントローラーがありません。 ディレクティブを使用する必要がありますngIncludeか?

6
AngularJS形式のJSON文字列出力
入力からデータを収集し、使用してモデルを文字列に変換しJSON.stringify()、<textarea>要素が更新された場合に入力フィールドが更新されるようにユーザーがこのモデルを編集できるようにするAngularJSアプリケーションがあります。何らかの双方向バインディング:) 問題は、文字列自体が醜く見えるので、次のようにフォーマットしたいと思います。 そして、今のようには見えません: これをどのように達成できるかについてのアイデアはありますか?追加情報が必要な場合は、遠慮なく質問してください。すべての回答は高く評価され、すぐに回答されます。 ありがとうございました。 PS私はこれがある種のディレクティブかカスタムフィルターであるべきだと思います。データ自体は変更すべきではなく、出力のみです。

4
selectMatchの角度ui-bootstrap typeaheadコールバック?
私は角度付きui-bootstrap typeaheadを使用していて、多くの選択肢を選択する方法としてそれを使用したいので、selectMatchメソッドが起動されたときに選択された値を取得する必要がありますが、方法が見つかりませんそれは私のコントローラーで <div class='container-fluid' ng-controller="TypeaheadCtrl"> <pre>Model: {{selected| json}}</pre> <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"> 選択した値を見ると、キーを押すたびに変化が出ます... scope.$watch('selected', function(newValue, oldValue) {... }); selectMatchメソッドは、ユーザーがEnterキーを押すか、リストをクリックすると呼び出されるメソッドであることがわかりましたが、それにコールバックする方法がわかりません... よろしくお願いします!

17
ユーザーがフィールドを離れた後にフィールドを検証する
AngularJSでは、ng-pristineまたはng-dirtyを使用して、ユーザーがフィールドに入力したかどうかを検出できます。ただし、クライアント側の検証は、ユーザーがフィールド領域を離れた後にのみ実行したいと思います。これは、ユーザーが電子メールや電話などのフィールドに入ると、完全な電子メールの入力が完了するまで常にエラーがスローされ、これは最適なユーザーエクスペリエンスではないためです。 例 更新: Angularにはカスタムのぼかしイベントが付属しています:https : //docs.angularjs.org/api/ng/directive/ngBlur
92 forms  angularjs 

4
AngularJS:コントローラーで$ validに手動で入力を設定するにはどうすればよいですか?
使用TokenInputのプラグインを内蔵してformController検証AngularJSを使用。 現在、フィールドにテキストが含まれているかどうかを確認し、含まれている場合はフィールドを有効に設定しようとしています。プラグインを使用する際の問題は、プラグインが独自の入力を作成し、それからul + liを作成することです。 コントローラでaddItem(フォーム名)と私の機能にアクセスできます。$ validに設定するだけです。 マークアップ。 <form class="form-horizontal add-inventory-item" name="addItem"> <input id="capabilities" name="capabilities" token-input data-ng-model="inventoryCapabilitiesAutoComplete" data-on-add="addCapability()" data-on-delete="removeCapability()" required> <div class="required" data-ng-show="addItem.capabilities.$error.required" title="Please enter capability."></div> </form> JS $scope.capabilityValidation = function (capability) { if (capability.name !== "") { addItem.capabilities.$valid = true; addItem.capabilities.$error.required = false; } else { addItem.capabilities.$valid = false; addItem.capabilities.$error.required …

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