0

AngularJS データバインディングを試すための単純な html があります。入力にテキストを入力すると、その下のラベルが正しくバインドされ、data.country が表示されます。ただし、バックスペースを使用してテキストがなくなるまで削除し、テキストを再入力しようとすると、バインドされたスパンに何も表示されません。これを繰り返し続けると（テキストの入力、削除、テキストの入力）、表示される場合と表示されない場合があるため、問題はランダムに見えます

ここにフィドルがありますhttp://jsfiddle.net/supatwo/eMfNp/

一見ランダムかと思いましたが、実はいつもパターンです。1. 「abcde」などのテキストを入力します。これにより、入力ボックスの下のスパンに正しくバインドされます。2. テキストがなくなるまでバックスペースします。3. 12345 などのテキストを再入力します。バグですか? 入力ボックスの下のスパンには何も表示されません。4. テキストがなくなるまでバックスペースします。5. テキストを入力すると、正しく表示されます。これを繰り返します (手順 1 ～ 5)。

私は確認するために batarang を使用しますが、ここでは $rootScope しかなく、batarang は $rootScope にモデルを表示しません。モデルをコントローラーに入れれば問題ありません。

<!doctype html>
<html lang="en" ng-app>
<head>
  <meta charset="utf-8">
  <title>My HTML File</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular/angular.js"></script>
  </head>
<body>
  country name: <input type="text" ng-model="data.country"></input>
   <br/><span class="label"> {{data.country}}</span> <br/>
</body>
</html>
4

1 に答える 1

0

このコードを見てください ( http://jsfiddle.net/denisonluz/9mFpp/245/ )。それは働いています。

<!doctype html>
 <html lang="en" ng-app="myApp">
 <head>
   <meta charset="UTF-8">
   <title>Document</title>

   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>

   <script>

   var myApp = angular.module('myApp', [])
       .controller('MainCtrl', function($scope) {
          $scope.data = {country: 'Brazil'};

          $scope.set = function(new_country) {
              this.data.country = new_country;
          }
      });

   </script>

  </head>
  <body>


    <div ng-controller="MainCtrl">
      <input name="data.country" ng-model="data.country"><br />
       <span>{{data.country}}</span><br />
       <button ng-click="set('Italy')">set to Italy</button>      
    </div>

    </body>
    </html>

あなたが直面している問題について、私が考えることができる唯一のことは、ビューではなくコントローラーでモデルを定義する必要があるということです。( https://stackoverflow.com/a/10612424/1310945 )

于 2013-10-07T10:16:34.317 に答える