角度チェックボックスから選択値を取得

入力チェックボックスから選択した項目を取得できないようです。その後、私のコントローラで角度チェックボックスから選択値を取得

<ul> 
    <li ng-repeat='shoe in shoebox'> 
    <input type='checkbox' ng-model='shoe.selected' id='shoe-{{shoe.name}}'> 
    <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label> 
    </li> 
    <button ng-click='whatIsChecked(shoe.selected)'>Apply</button> 
</ul>

：

$scope.whatIsChecked = function(selectedThing) { 
    console.log(selectedThing); 
};

上記リターンundefined。

リスト項目は正しく表示されますが、shoe.nameまたはチェック項目はng-modelで保存されていないようです。

出典

2017-04-24 bruh

はあなたがそれを変更したとき**更新を**靴箱内のデータですか？ –

私はshoeboxのデータを変更しません。現在のところ、それは正確にプリントアウトする異なるシューズのコレクションです。関連するチェックボックスを選択すると、そのアイテムをモデルに保存します。あなたの質問に答えることを願っています – bruh

変数shoeは、ng-repeatブロックでのみ有効です。

選択したものを取得したい場合は、filterを試してください。

UPD：あなたが選択したプロパティを持っていないので 、あなたはng-clickイベントを焼成してどこかに選択した項目を維持する必要があります。

は、以下のコードスニペットを参照してください。

angular.module("app", []) 
 
    .controller("myCtrl", function($scope) { 
 
    
 
    $scope.checkedShoes = []; 
 
    
 
    $scope.shoebox = [{ 
 
     name: 'shoe1' 
 
     }, 
 
     { 
 
     name: 'shoe2' 
 
     }, 
 
     { 
 
     name: 'shoe3' 
 
     }, 
 
     { 
 
     name: 'shoe4' 
 
     } 
 
    ]; 
 
    
 
    $scope.save = function(e, shoe) { 
 
     if (e.target.checked) { 
 
     $scope.checkedShoes.push(shoe); 
 
     } else { 
 
     var index = $scope.checkedShoes.indexOf(shoe); 
 
     if(index > -1) { 
 
      $scope.checkedShoes.splice(index, 1); 
 
     } 
 
     } 
 
     
 
    }; 
 
    
 
    $scope.whatIsChecked = function() { 
 
     //var selected = $scope.shoebox.filter(function(item) { 
 
     // return item.selected === true; 
 
     //}); 
 
     
 
     console.log($scope.checkedShoes); 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app="app" , ng-controller="myCtrl"> 
 
    <ul> 
 
    <li ng-repeat='shoe in shoebox'> 
 
     <input type='checkbox' ng-click="save($event, shoe)" id='shoe-{{shoe.name}}'> 
 
     <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label> 
 
    </li> 
 
    <button ng-click='whatIsChecked()'>Apply</button> 
 
    </ul> 
 
</div>

出典

2017-04-24 02:19:39 Pengyy

私はあなたのスニペットを実行することができますが、それは素晴らしいですが、私が試してみると 'console.log（selected）'から返された空の配列 '[]'を得ています。私はあなたがあなたの例のように明示的に各靴を偽に設定しているわけではないので、私はそれを思う。これは、各靴オブジェクトに 'selected'プロパティが必要ないように変更できますか？ – bruh

@bruhだから、あなたの 'shoebox'に選択した情報を保存しないことを意味しますか？ – Pengyy

ng-modelの例の名前として 'shoe.selected'を使用しました。私は実際にあなたの例のように各靴オブジェクトに 'selected'プロパティを持っていません。 *私はこれがなぜ 'console.log（選択）'しようとしたときに空の配列を返していると信じているのですか？ – bruh

あなたがチェックし、複数のアイテムを持っているとき、それは容易になるangular.Foreachを使用してチェックされた項目を取得することができます。

$scope.checkedItems = []; 
     angular.forEach($scope.shoebox, function(value, key) { 
      if (value.selected) 
      $scope.checkedItems.push(value.name); 
});

デモ

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.shoebox = [{ 
 
    name: 'Reboke', 
 
    selected: false 
 
    }, { 
 
    name: 'woodlands', 
 
    selected: false 
 
    }, { 
 
    name: 'Nike', 
 
    selected: false 
 
    }, { 
 
    name: 'Fila', 
 
    selected: false 
 
    }]; 
 
    $scope.checkedItems = function() { 
 
    $scope.checkedItems = []; 
 
    angular.forEach($scope.shoebox, function(value, key) { 
 
     if (value.selected) 
 
     $scope.checkedItems.push(value.name); 
 
    }); 
 

 
    } 
 
});

<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS </title> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="https://code.angularjs.org/1.4.7/angular.js"></script> 
 
</head> 
 
<body ng-app="myApp" ng-controller="myCtrl"> 
 
    <ul> 
 
    <li ng-repeat='shoe in shoebox'> 
 
    <input type='checkbox' ng-model='shoe.selected' id='shoe-{{shoe.name}}'> 
 
    <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label> 
 
    </li> 
 
    <button ng-click='checkedItems()'>Apply</button> 
 
    Checked items are: {{checkedItems}} 
 
</ul> 
 
     
 
</body> 
 
</html>

出典

2017-04-24 02:22:21 Sajeetharan

角度チェックボックスから選択値を取得

答えて

関連する問題