[解決済み] Ng-modelでコントローラの値が更新されない
2022-02-26 07:30:40
質問
おそらく愚問でしょうが、私は単純な入力とボタンを持つ私のhtmlフォームを持っています。
<input type="text" ng-model="searchText" />
<button ng-click="check()">Check!</button>
{{ searchText }}
次にコントローラで(テンプレートとコントローラはrouteProviderから呼び出されます)。
$scope.check = function () {
console.log($scope.searchText);
}
ボタンをクリックすると、ビューは正しく更新されるのに、コンソールでは未定義と表示されるのはなぜですか?
ありがとうございます。
更新しました。
私は実際に(いくつかの回避策を考え出す前に)その問題を解決したように見える。
プロパティ名を
searchText
から
search.text
を定義した後、空の
$scope.search = {};
オブジェクトを作成し、完成です。なぜうまくいくのかはわかりません。]
解決方法は?
コントローラとして バージョン(推奨)
テンプレートはこちら
<div ng-app="example" ng-controller="myController as $ctrl">
<input type="text" ng-model="$ctrl.searchText" />
<button ng-click="$ctrl.check()">Check!</button>
{{ $ctrl.searchText }}
</div>
JS
angular.module('example', [])
.controller('myController', function() {
var vm = this;
vm.check = function () {
console.log(vm.searchText);
};
});
一例です。 http://codepen.io/Damax/pen/rjawoO
Angular 2.xまたはAngular 1.5以上のコンポーネントを使用するのがベストです。
########古い 方法 (推奨しません)
文字列はプリミティブであるため、これは推奨されません。
あなたのマークアップで試してみてください
<input type="text" ng-model="searchText" />
<button ng-click="check(searchText)">Check!</button>
{{ searchText }}
で、これをコントローラに記述します。
$scope.check = function (searchText) {
console.log(searchText);
}
関連
-
[解決済み】JavaScriptのボタンonclickが機能しない
-
[解決済み】 Uncaught Error: Invariant Violation: 解決済み】 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object.
-
[解決済み】WebSocket接続に失敗しました。WebSocket のハンドシェイク中にエラーが発生しました。予期しない応答コードです。400
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScript で配列に値が含まれているかどうかを確認するにはどうすればよいですか?
-
[解決済み] なぜGoogleはJSONレスポンスにwhile(1);を前置するのでしょうか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Uncaught ReferenceError: angular is not defined - AngularJSが動作しない。
-
[解決済み] 解決済み】clearInterval()が動作しない [重複] [重複]
-
[解決済み】ある要素が可視DOMに存在するかどうかを確認するにはどうすればいいですか?
-
[解決済み】 Uncaught Error: Invariant Violation: 解決済み】 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object.
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み】HTMLの最初の行に予期しないトークン<がある。
-
[解決済み】 \u003C とは何ですか?
-
[解決済み】react router v^4.0.0 Uncaught TypeError: 未定義のプロパティ'location'を読み取れない
-
[解決済み] 語彙的スコープとは何ですか?
-
[解決済み】AngularJSのスコーププロトタイピング/プロトタイピング継承のニュアンスとは?