Angular JSを使用してCheckedチェックボックスの値を変数に格納します

以下のオブジェクト値を使用してng-repeatを使用してチェックボックスのグループを作成しました。Angular JSを使用してCheckedチェックボックスの値を変数に格納します

$scope.config = { days: [ 
      {name:'Monday'}, 
      {name:'Tuesday'}, 
      {name:'Wednesday'}, 
      {name:'Thursday'}, 
      {name:'Friday'}, 
      {name:'Saturday'}, 
      {name:'Sunday'}, 
     ]} 
});

ng-repeatを使用したチェックボックスは、そのようなものです。

<ul class="list-inline"> 
<li ng-repeat="day in config.days"> 
    <div class="checkbox"> 
     <label class="xsm-label"> 
      <input type="checkbox" ng-model="day.selected" value="{{day.name}}" id="cs_select_{{day.name}}" name="selected_days" />&nbsp;{{day.name}} 
     </label> 
    </div> 
</li> 
</ul>

私は大したことはありませんでしたが、親切にチェックボックスの値の値を変数に保存する方法を教えてください。

ありがとうございます。

出典

2017-05-26 Ajeet

働いているもの？何が表示されますか？おそらくそれはあなたの日に "。選択された"プロパティが存在しないからです... – Julo0sS

チェックボックスをオンにすると、変数を新しい値で更新すると、ng-changeを使用できます。

コードの下には、最後に選択したチェックボックスが表示されます。必要に応じて空の文字列に置き換えることができます。

$scope.selectedDay= day.selected ? day.name : $scope.selectedDay;

var app = angular.module("MyApp", []).controller("MyCtrl", function($scope) { 
 

 
    $scope.config = { days: [ 
 
      {name:'Monday'}, 
 
      {name:'Tuesday'}, 
 
      {name:'Wednesday'}, 
 
      {name:'Thursday'}, 
 
      {name:'Friday'}, 
 
      {name:'Saturday'}, 
 
      {name:'Sunday'}, 
 
     ]}; 
 
     
 
     
 
    $scope.storeValue = function(day) { 
 
    $scope.selectedDay= day.selected ? day.name : $scope.selectedDay; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="MyApp" ng-controller="MyCtrl"> 
 
<ul class="list-inline"> 
 
<li ng-repeat="day in config.days"> 
 
    <div class="checkbox"> 
 
     <label class="xsm-label"> 
 
      <input type="checkbox" ng-model="day.selected" value="{{day.name}}" id="cs_select_{{day.name}}" name="selected_days" ng-change="storeValue(day)" />&nbsp;{{day.name}} 
 
     </label> 
 
    </div> 
 
</li> 
 
</ul> 
 

 
{{selectedDay}} 
 
</body>

出典

2017-05-26 05:33:15 Sajal

それはOKです。 config.days配列のループで選択した値を取得し、selectedがtrueの項目を取得します。

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

 
app.controller('main', ['$scope', function($scope){ 
 
    $scope.config = { days: [ 
 
      {name:'Monday'}, 
 
      {name:'Tuesday'}, 
 
      {name:'Wednesday'}, 
 
      {name:'Thursday'}, 
 
      {name:'Friday'}, 
 
      {name:'Saturday'}, 
 
      {name:'Sunday'}, 
 
     ]}; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
    <div ng-app="app" ng-controller="main"> 
 
<ul class="list-inline"> 
 
<li ng-repeat="day in config.days"> 
 
    <div class="checkbox"> 
 
     <label class="xsm-label"> 
 
      <input type="checkbox" ng-model="day.selected" value="{{day.name}}" id="cs_select_{{day.name}}" name="selected_days" />&nbsp;{{day.name}} 
 
     </label> 
 
    </div> 
 
</li> 
 
</ul> 
 
<pre>{{config.days | json}}</pre> 
 

 
</div>

出典

2017-05-26 05:38:25

あなたはあなたのHTMLが見えるはずです

$scope.selected = function(day, index) { 
    day.selected ? $scope._selected.push(day.name) : $scope._selected.splice(index, 1) 
}

関数内あなたがチェック値を格納することができ、チェックボックスの変更の方法を実行するためにng-changeディレクティブを使用する必要があります

<li ng-repeat="day in config.days"> 
    <div class="checkbox"> 
     <label class="xsm-label"> 
      <input type="checkbox" ng-model="day.selected" value="{{day.name}}" id="cs_select_{{day.name}}" 
      name="selected_days" ng-change="selected(day, $index)"/>&nbsp;{{day.name}} 
              ^^^^^^^^^This ^^^^^^^^^ 
     </label> 
    </div> 
</li>

Working Plunkr

出典

2017-05-26 05:40:13

は、あなたの入力ディレクティブng-change="onChange(day)"に含める：

<input type="checkbox" ng-model="day.selected" id="cs_select_{{day.name}}" name="selected_days" 
      ng-change="onChange(day)"/>&nbsp;{{day.name}}

次に、あなたのコントローラで、としての機能を定義します。

 $scope.onChange = function(day) { 

      $scope.lastSelectedDayValue = day.selected ? day.name : ''; 

      $scope.allSelectedDays = $scope.config.days.filter(function(day){ 
                 return day.selected 
                }).map(function(day){ 
                 return day.name 
                }); 
     }

あなたは$scope.lastSelectedDayValueで、クリックした最後の日を持っています、 $scope.allSelectedDaysには、現在の瞬間に選択されているすべての日の配列があります。

出典

2017-05-26 05:59:17

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

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.config = { days: [ 
 
      {name:'Monday'}, 
 
      {name:'Tuesday'}, 
 
      {name:'Wednesday'}, 
 
      {name:'Thursday'}, 
 
      {name:'Friday'}, 
 
      {name:'Saturday'}, 
 
      {name:'Sunday'}, 
 
     ]}; 
 
     
 
    var arr = [];  
 
    $scope.getSelected = function(selectedDay) { 
 
     if(arr.indexOf(selectedDay) == -1) { 
 
     arr.push(selectedDay); 
 
     } 
 
     console.log(arr); 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <ul class="list-inline"> 
 
<li ng-repeat="day in config.days"> 
 
    <div class="checkbox"> 
 
     <label class="xsm-label"> 
 
      <input type="checkbox" ng-model="selectedDay" value="{{day.name}}" id="cs_select_{{day.name}}" name="selected_days" ng-change="getSelected(day.name)"/>&nbsp;{{day.name}} 
 
     </label> 
 
    </div> 
 
</li> 
 
</ul> 
 
</div>

出典

2017-05-26 08:50:48

Angular JSを使用してCheckedチェックボックスの値を変数に格納します

答えて

関連する問題