SORU
25 Ocak 2013, Cuma


AngularJS : liste bağlamak için Nasıl checkbox değerleri?

Birkaç onay kutularını var:

<input type='checkbox' value="apple" checked>
<input type='checkbox' value="orange">
<input type='checkbox' value="pear" checked>
<input type='checkbox' value="naartjie">

Bir onay kutusu değiştiğinde bu benim denetleyicisi içinde bir listesi bağlamak istiyorum denetleyicisi örneğin ['apple', 'pear'] tüm kontrol değerlerinin bir listesini tutar.

ng-model sadece denetleyici bir değişken için tek bir onay kutusu değeri bağlamak mümkün gibi görünüyor.

Bu contrller bir listesi için dört kutularını bağlamak böylece bunu yapmak için başka bir yol var mı?

CEVAP
25 Ocak 2013, Cuma


Bu sorunu yaklaşım için iki yol vardır. Ya da basit bir dizi ya da nesnelerin bir dizi kullanın. Her çözüm artıları ve eksileri vardır. Her durum için bir tane bulacaksınız aşağıda.


Giriş verisi olarak basit bir dizi ile

html gibi görünebilir:

<label ng-repeat="fruitName in fruits">
  <input
    type="checkbox"
    name="selectedFruits[]"
    value="{{fruitName}}"
    ng-checked="selection.indexOf(fruitName) > -1"
    ng-click="toggleSelection(fruitName)"
  > {{fruitName}}
</label>

ve uygun denetleyici kod şöyle olacaktır:

app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {
  // fruits
  $scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];

  // selected fruits
  $scope.selection = ['apple', 'pear'];

  // toggle selection for a given fruit by name
  $scope.toggleSelection = function toggleSelection(fruitName) {
    var idx = $scope.selection.indexOf(fruitName);

    // is currently selected
    if (idx > -1) {
      $scope.selection.splice(idx, 1);
    }

    // is newly selected
    else {
      $scope.selection.push(fruitName);
    }
  };
}]);

Artılarıbasit veri yapısı ve Adı geçmek kolay

İnş: Ekle/Kaldır iki liste olarak hantal (giriş seçimi) yönetilmesi gerekiyor


Giriş verisi olarak nesne bir dizi ile

html gibi görünebilir:

<label ng-repeat="fruit in fruits">
  <!--
    - use `value="{{fruit.name}}"` to give the input a real value, in case the form gets submitted
      traditionally

    - use `ng-checked="fruit.selected"` to have the checkbox checked based on some angular expression
      (no two-way-data-binding)

    - use `ng-model="fruit.selected"` to utilize two-way-data-binding. Note that `.selected`
      is arbitrary. The property name could be anything and will be created on the object if not present.
  -->
  <input
    type="checkbox"
    name="selectedFruits[]"
    value="{{fruit.name}}"
    ng-model="fruit.selected"
  > {{fruit.name}}
</label>

ve uygun denetleyici kod şöyle olacaktır:

app.controller('ObjectArrayCtrl', ['$scope', 'filterFilter', function ObjectArrayCtrl($scope, filterFilter) {
  // fruits
  $scope.fruits = [
    { name: 'apple',    selected: true },
    { name: 'orange',   selected: false },
    { name: 'pear',     selected: true },
    { name: 'naartjie', selected: false }
  ];

  // selected fruits
  $scope.selection = [];

  // helper method to get selected fruits
  $scope.selectedFruits = function selectedFruits() {
    return filterFilter($scope.fruits, { selected: true });
  };

  // watch fruits for changes
  $scope.$watch('fruits|filter:{selected:true}', function (nv) {
    $scope.selection = nv.map(function (fruit) {
      return fruit.name;
    });
  }, true);
}]);

Artıları: Ekle/Kaldır çok kolay

İnş: ada göre biraz daha karmaşık veri yapısı ve geçmek hantal ya da yardımcı bir yöntem gerektirir


Demo: http://jsbin.com/ImAqUC/1/

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • KoreanFrogMania님의 채널

    KoreanFrogMa

    18 Aralık 2011
  • PCDIY

    PCDIY

    16 AĞUSTOS 2013
  • RinconDynamic

    RinconDynami

    1 EKİM 2011