0

サーバーに POST するには、選択したチェックボックスをまとめてバンドルする必要があります。各チェックボックスの属性には、「pos」(品詞) と定義という 2 つの重要な値を格納しています。これらの各チェックボックスを実行し、それを JSON 配列にプッシュして、[単語を追加] ボタンが押されたときに送信する必要があります。

<input type="checkbox" name="definition-checkbox" pos="noun" definition="Hill, rolling grassland" class="ng-valid ng-dirty">

チェックボックスを要素制限されたディレクティブに変えて、そこで何かをすることを考えましたが、非Angularのように見えるすべてのループを実行せずに、ここですべての値を取得する方法がわかりません.

何かアドバイス？

プロトタイプ

4

1 に答える 1

4

posおよび属性の文字列がどこから来ているかを判断するのは困難definitionですが、Angular では、スコープでアクセス可能なデータをビューに反映させたいと考えています。スコープ上のデータ。

この特定のケースでは、オブジェクトにposandが表示されると思います。definitionおそらく、コントローラーはそれらの配列にアクセスできます。

app.controller('WordController', function($scope) {
  $scope.word = 'property';

  // Maybe this array came from an $http call; maybe it was injected
  // into the page with `ngInit` or `$routeProvider`.
  // The point is, the controller has a client-side representation of
  // the data you want to show *and manipulate* in the view.
  $scope.definitions = [
    { checked: false, pos: 'noun', definition: 'Something that is owned' },
    { checked: false, pos: 'noun', definition: 'A piece of real estate, such as a parcel of land' },
    { checked: false, pos: 'noun', definition: 'real estate; the business of selling houses' },
    { checked: false, pos: 'noun', definition: 'The exclusive right of possessing, enjoying and disposing of a thing' }
    // ...
  ];
});

この情報がスコープにあるので、ビューで簡単にバインドできます。

<div ng-repeat='definition in definitions'>
  <input type='checkbox' ng-model='definition.checked'> {{definition.definition}}
</div>
<input type='submit' ng-click='submitDefinitions()' value='Add Word'>

.checkedチェックボックスをクリックすると、各定義の属性が直接変更submitDefinitionsされるため、コントローラーのメソッドは、どの定義が選択されたかを簡単に判断できます。

app.controller('WordController', function($scope) {
  // ...

  $scope.submitDefinitions = function() {
    var selectedDefinitions = $scope.definitions.filter(function(def) {
      return def.checked;
    });
    // do something with selected definitions
  };
});

これは、基本的なテクニックを示す JSFiddle です: http://jsfiddle.net/BinaryMuse/cTBm4/

于 2013-05-11T06:22:52.857 に答える