アレイ内のチェックボックスの値を自動的に選択して収集する

ビューからモデルへのデータの設定（チェック）とフェッチに問題があります。私の問題をコードでさらに説明しましょう。チェックボックスをチェックする方法に基づいて：アレイ内のチェックボックスの値を自動的に選択して収集する

は、これは私が

<label>Working days</label> 
<div class="checkbox"> 
    <label ng-repeat="w in workDays" > 
      <input type="checkbox" ng-value="w.value" ng-checked="selectedDays" > 
      {{w.name}}&nbsp;&nbsp; 
    </label> 
</div>

1.質問私のHTMLにNGリピートと、それらのチェックボックスをレンダリング

$scope.workDays = [ 
       {name: 'Monday', value: 1}, 
       {name: 'Tuesday', value: 2}, 
       {name: 'Wednesday', value: 3}, 
       {name: 'Thursday', value: 4}, 
       {name: 'Friday', value: 5}, 
       {name: 'Saturday', value: 6}, 
       {name: 'Sunday', value: 7}, 
      ] 
$scope.selectedDays = "1,3,4,6";

次に営業日を提供私のコントローラであり、値$ scope.selectedDays？

私は私が常に

は、だから私のコントローラは、その後、私が選択し、この

$scope.myData = []; 
console.log($scope.myData);

のように見える空の配列を取得し、いくつかのチェックボックスを選択解除し、新たな選択された値を取得しようとしたらで持って第二の問題、コンソールログで空の配列が報告される[]

私はあなたが私を助けてくれることを願っています。追加情報が必要な場合は、私に知らせてください。ありがとうございました！固定

出典

2016-06-30 Valor_

通常、オブジェクトの中で選択されたプロパティが使用され、入力のng-modelはそのプロパティ – juvian

でng-ifを使用できます。試してみてくださいhttps://docs.angularjs.org/api/ng/directive/ngIf –

あなたのコントローラに機能を追加し、あなたのモデル（$ scope.myData）を初期化するために、それを呼び出して、このように：あなたはこのようなあなたのマークアップを簡素化することができます

コントローラ

$scope.myData = []; 
function getMyData() { 
    angular.forEach($scope.workDays, function(day) { 
    var newDay = { 
     name: day.name, 
     selected: $scope.selectedDays.indexOf(day.value) >= 0 
    }; 
    $scope.myData.push(newDay); 
    }); 
} 

getMyData();

：

マークアップ

<div class="checkbox"> 
    <label ng-repeat="w in myData"> 
    <input type="checkbox" ng-model="w.selected"> {{w.name}}&nbsp;&nbsp; 
    </label> 
</div>

この作業はhereで確認できます。

出典

2016-06-30 20:37:28 jbrown

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name = 'World'; 
 

 
    $scope.workDays = [{ 
 
    name: 'Monday', 
 
    value: 1 
 
    }, { 
 
    name: 'Tuesday', 
 
    value: 2 
 
    }, { 
 
    name: 'Wednesday', 
 
    value: 3 
 
    }, { 
 
    name: 'Thursday', 
 
    value: 4 
 
    }, { 
 
    name: 'Friday', 
 
    value: 5 
 
    }, { 
 
    name: 'Saturday', 
 
    value: 6 
 
    }, { 
 
    name: 'Sunday', 
 
    value: 7 
 
    }, ] 
 
    $scope.selectedDays = [1, 3, 4, 6]; 
 
    $scope.myData = $scope.selectedDays; 
 

 
    $scope.getData = function(Day) { 
 
    var index = $scope.myData.indexOf(Day); 
 

 
    if (index < 0) { 
 
     $scope.myData.push(Day) 
 
     console.log('myData', $scope.myData); 
 
    } else { 
 
     $scope.myData.splice(index, 1) 
 
     console.log('myData', $scope.myData); 
 
    } 
 
    } 
 
    $scope.IsChecked = function(Day) { 
 

 

 
    var index = $scope.selectedDays.indexOf(Day); 
 

 
    if (index > -1) { 
 

 
     return true 
 
    } else { 
 
     return false 
 
    } 
 
    } 
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <link data-require="[email protected]" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" /> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <p>Hello {{name}}!</p> 
 
    <label>Working days</label> 
 
    <div class="checkbox"> 
 
    <label ng-repeat="w in workDays" ng-model="myData"> 
 
     <input type="checkbox" ng-value="w.value" ng-click="getData(w.value)" ng-checked="IsChecked(w.value)" />{{w.name}} 
 
    </label> 
 
    </div> 
 

 
</body> 
 

 
</html>

。

出典

2016-06-30 20:30:36 Prianca

アレイ内のチェックボックスの値を自動的に選択して収集する

答えて

関連する問題