1. ホーム
  2. javascript

[解決済み] 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);
}