3

チェックボックスのリストで複数の項目をチェックする機能を実装しようとしています。Map を使用して、データとその選択/非選択状態を保存しています。

List<String> fruits = [
  {'fruit': 'apple', 'selected': true},
  {'fruit': 'banana', 'selected': true},
  {'fruit': 'kiwi', 'selected': false}
];

チェックボックスは、最初はチェックされている/チェックされていない状態が正しくレンダリングされて表示されますが、チェックボックスのチェックされた状態を切り替えると、fruitsマップが更新されません。ここで双方向バインディングを正しく作成するにはどうすればよいですか?

ここに私の .dart ファイルがあります:

import 'package:angular/angular.dart';

@NgDirective(
  selector: '[my-controller]',
  publishAs: 'ctrl'
)
class MyController {
  List<String> fruits = [
    {'fruit': 'apple', 'selected': true},
    {'fruit': 'banana', 'selected': true},
    {'fruit': 'kiwi', 'selected': false}
  ];
}

main() {
  ngBootstrap(module: new Module()..type(MyController));
}

ビューのマークアップは次のとおりです。

<!DOCTYPE html>
<html ng-app>
  <body>
    <div my-controller>            
      <ul>
        <li ng-repeat="item in ctrl.fruits">
          {{item['fruit']}}
          <input type="checkbox" ng-model="item['selected']" />
        </li>
      </ul>
    </div>

    <!-- THIS DOES NOT UPDATE WHEN THE CHECKBOXES ARE TOGGLED -->
    {{ctrl.fruits}}

    <script type="application/dart" src="main.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>
  </body>
</html>
4

3 に答える 3

2

編集2 私は2つのIMHOの使用可能なソリューションを見つけました

1

{{ctrl.fruits.toString()}}

2

<div ng-repeat="item in ctrl.fruits">{{item['fruit']}} - {{item['selected']}}

編集

小さな改善ですが、それでも醜い回避策です

  void update() {
    var tmp = fruits;
    fruits = null;
    Timer.run(() => fruits = tmp);
  }

<input type="checkbox" ng-model="item['selected']" ng-click="ctrl.update()"/>

まず 、定期的に呼び出すタイマーを追加しました

new Timer.periodic(new Duration(milliseconds: 2000), (t) => print(fruits = new List.from(fruits)));

これにより、出力が更新されます。
タイマーなしで行う方法はまだわかりません。
メンバーの果物の変更のみが認識され、リスト内の要素の変更は認識されないと思います。AngularDart コレクションの要素を監視するにはどうすればよいですか? に
関連している可能性があります。

于 2014-01-07T18:53:34.687 に答える
1

私の推測では、試してみること$watchです...ダーツには詳しくありませんが、あなたの問題は、オブジェクトが深く監視されていないように聞こえます。ディープ ウォッチがないと、angular はfruits3 つのオブジェクトを含む配列として認識され、それ以上の検索は行われません。 ディープ ウォッチを使用すると、3 つのオブジェクトを含む配列が表示され、それらのオブジェクトのプロパティも表示され、それらが変更されると更新されます。

編集

これは生の JS で書かれた JSFiddleです...この JS を使用すると、期待どおりに動作します

function TodoCtrl($scope) {
  $scope.fruits = [
  {'fruit': 'apple', 'selected': true},
  {'fruit': 'banana', 'selected': true},
  {'fruit': 'kiwi', 'selected': false}
];

  $scope.printFruits = function(){return JSON.stringify($scope.fruits);}
}

そしていくつかの本当にばかげたHTML

<div ng-app>
  <div ng-controller="TodoCtrl">      
     <ul>
       <li ng-repeat="item in fruits">
         {{item['fruit']}}
         <input type="checkbox" ng-model="item['selected']" />
       </li>
     </ul>
    <span>{{printFruits()}}</span> <!-- Works correctly as items are checked -->
  </div>
</div>

ctrl.fruitsへのアクセスをdiv、コントローラーとして実行されているものに移動してみてください。$watchアクセスがチェックボックスを実行するコントローラーと同じスコープ内にないため、fre を取得できない可能性があります。

于 2014-01-07T19:42:32.750 に答える