AngularJS ng-repeat 了解如何查找复选框值答案

【问题标题】：AngularJS ng-repeat understanding how to find checkbox valuesAngularJS ng-repeat 了解如何查找复选框值
【发布时间】：2015-12-06 04:08:49
【问题描述】：

首先是 Angular 的新手 :)

我有一个页面显示来自 JSON 对象的项目列表。该 Json 对象中有一个日期数组

$obj = [
    {
        id: '1',
        GoalName: 'Smoke Less',
        StartDate: '9/1/2015',
        EndDate: '9/30/2015',
        GoalType: "positive",
        Category: "Health",
        Weight: "3",
        TimesPerWeek: 4,
        Dates: {
            "09/11/2015": 0,
            "09/10/2015": 1,
            "09/08/2015": 1
        }
    }

我得到了 ng-repeat 来展示数组中的项目，但我很难理解如何控制复选框。当我展示项目时，我在屏幕上设置了一个日期，我想检查数组以查看该日期是否存在，如果存在则选中复选框。此外，如果用户然后单击复选框，它会更新项目。我隐约明白我需要制作复选框的模型，但不完全理解它是如何工作的。

app.controller('TrackGoals', function ($scope) {
    $scope.today = Date.today();
});

<ul class="list" id="thehabits" ng-repeat="goal in goals">
    <li class="expanded-cell">
        <div class="pull-right form-group cell-content">
            <label>
                <input type="checkbox" class="option-input checkbox" ng-model="ids[goal.dates.id].value">
            </label>
        </div>
        <div class="cell-content">
            <span id="habittext" class="title">{{ goal.GoalName }} </span>
        </div>
    </li>
</ul>

【问题讨论】：

当你制作一个 ng-model（不是 ng=model）时，它会自动在作用域中可用。

标签： javascript json angularjs checkbox

【解决方案1】：

试试这个：

var app = angular.module('myApp', []);
app.controller('TrackGoals', function($scope) {
  $scope.goals = [{
    id: '1',
    GoalName: 'Smoke Less',
    StartDate: '9/1/2015',
    EndDate: '9/30/2015',
    GoalType: "positive",
    Category: "Health",
    Weight: "3",
    TimesPerWeek: 4,
    Dates: {
      "09/11/2015": 0,
      "09/10/2015": 1,
      "09/08/2015": 1
    }
  }, {
    id: '2',
    GoalName: 'Smoke Less',
    StartDate: '9/1/2015',
    EndDate: '9/30/2015',
    GoalType: "positive",
    Category: "Health",
    Weight: "3",
    TimesPerWeek: 4,
    Dates: {}
  }];
  $scope.setCheckboxVal = function(val) {
    var arr = [];
    for (var i in val) {
      if (val.hasOwnProperty(i)) {
        arr.push({
          date: i,
          value: val[i]
        });
      }
    }
    return !!arr.length;
  };
  $scope.showData = function() {
    console.log(JSON.stringify($scope.goals));
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='myApp'>

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="angular.min.js"></script>
</head>

<body ng-controller="TrackGoals">
  <ul class="list" id="thehabits" ng-repeat="goal in goals">
    <li class="expanded-cell">
      <div class="pull-right form-group cell-content">
        <label>
          <input type="checkbox" class="option-input checkbox" ng-model="goal.checkboxVal" ng-init="goal.checkboxVal=setCheckboxVal(goal.Dates)">
        </label>
      </div>
      <div class="cell-content">
        <span id="habittext" class="title">{{ goal.GoalName }} </span>
      </div>
    </li>
  </ul>
  <button type="button" ng-click="showData()">Show data</button>
</body>

</html>

【讨论】：

谢谢你，这让我大部分时间都在那里，我很感激。