【问题标题】:Angularjs check box selected values not identifiedAngularjs复选框选定的值未识别
【发布时间】:2019-05-30 19:13:52
【问题描述】:

您好,这个问题已经问过了,但这并没有解决我的问题。

我正在将复选框值传递给控制器​​,但我无法确定选择了哪一个。

这是我的代码

HTML:

<div class="col-sm-3" ng-repeat="days in formData.businessDays">
   <input type="checkbox" ng-model="business_days.Selected" ng-change=""><span>  {{days.name}}</span>
</div>

Js:

$scope.addData = function(form)
{
    $scope.formData.days_id = [];
    angular.forEach($scope.formData.businessDays, function(businessDays){
       //console.log(businessDays);
        if (businessDays.Selected) {
            $scope.formData.days_id.push(businessDays.value);
        }
    })
}

//this days data values
$scope.formData.businessDays = [{
                    name: "Monday",
                    value: "M",
                  }, {
                    name: "Tuesday",
                    value: "T",
                  }, {
                    name: "Wednesday",
                    value: "W",
                  }, {
                    name: "Thursday",
                    value: "Th",
                  }, {
                    name: "Friday",
                    value: "F",
                  }, {
                    name: "Saturday",
                    value: "S",
                  }, {
                    name: "Sunday",
                    value: "Su",
                  }, ];

这是我的控制台图像

我无法确定哪个是选定的值?

【问题讨论】:

  • 如何在您的代码中修复ng-change=")"。如果您可以在 plunkr.com 上提供演示示例,那就更好了
  • @ShashankVivek 我会更新,请立即查看

标签: angularjs checkbox angularjs-scope selected


【解决方案1】:
 <div class="col-sm-3" ng-repeat="days in formdata.businessDays">
    <input type="checkbox" ng-model="days.selected" ng-click="selected(days)"> 
    <span> {{days.name}}</span>
 </div>

在控制器中

 $scope.selected = function(d){
    console.log(d);

}

$scope.formdata = {};
$scope.formdata.businessDays = [{
    name: "Monday",
    value: "M",
}, {
    name: "Tuesday",
    value: "T",
}, {
    name: "Wednesday",
    value: "W",
}, {
    name: "Thursday",
    value: "Th",
}, {
    name: "Friday",
    value: "F",
}, {
    name: "Saturday",
    value: "S",
}, {
    name: "Sunday",
    value: "Su",
},];

【讨论】:

  • 谢谢你的回答其实我也解决了这个问题请检查我的回答
【解决方案2】:

您必须为$scope.formData.businessDays 中的每个object 提供一个属性selected,以识别它是否被选中,例如:-

$scope.selectedItems = [];
  $scope.formData = {};
  $scope.formData.businessDays = [{
    name: "Monday",
    value: "M",
    selected: false
  }, {
    name: "Tuesday",
    value: "T",
    selected: false
  }, {
    name: "Wednesday",
    value: "W",
    selected: false
  }, {
    name: "Thursday",
    value: "Th",
    selected: false
  }, {
    name: "Friday",
    value: "F",
    selected: false
  }, {
    name: "Saturday",
    value: "S",
    selected: false
  }, {
    name: "Sunday",
    value: "Su",
    selected: false
  }];
  $scope.changed = function(value) {
    if (value.selected) {
      $scope.selectedItems.push(value.name);
    } else {
      var theIndex = $scope.selectedItems.indexOf(value.name);
      if (theIndex != -1) {
        $scope.selectedItems.splice(theIndex, 1);
      }
    }
  }

并订阅checkboxeschange 事件以使属性保持最新

<div class="col-sm-3" ng-repeat="days in formData.businessDays">
  <input type="checkbox" ng-model="days.selected" ng-change="changed(days)"><span> {{days.name}} </span>
</div>
<div>
  <p>selected values</p>
  <label ng-repeat="item in selectedItems">{{item}} </label>
</div>

【讨论】:

  • 谢谢你的回答其实我也解决了这个问题请检查我的回答
【解决方案3】:
<div class="col-sm-3" ng-repeat="days in formData.businessDays">
   <input type="checkbox" ng-model="days.Selected" ng-change=")"><span>  {{days.name}}</span>
</div>


$scope.addData = function(form)
{
    $scope.formData.days_id = [];
    angular.forEach($scope.formData.businessDays, function(businessDays){
       //console.log(businessDays);
        if (businessDays.Selected) {
            $scope.formData.days_id.push(businessDays.value);
        }
    })
}

【讨论】:

    猜你喜欢
    • 2018-12-19
    • 2014-01-11
    • 1970-01-01
    • 2019-05-25
    • 2017-08-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-18
    相关资源
    最近更新 更多