Question

我现在已经学习角度三天了，我遇到了一些挑战，但我仍然无法用Angular.js解决它，我已经搜索过了，但是很难解释我正在努力实现的目标。

我想检测哪些复选框已被选中，然后显示输入到输入中的数字，检查其复选框。

这是一张图（请原谅我的解释）：

[X] | 3 _____________ |
  [_] | 4 _____________ |
  [X] | 10 ____________ |
  [X] | 4 _____________ |
  [X] | 1 _____________ |
  3，10,4,1

我的代码：

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <title>jQueryForm</title>
</head>

<body ng-app="">
  <div id="form">
    <input type="checkbox" />
    <label>Data:</label>
    <input type="number" ng-model="data1" />
    <br/>
    <input type="checkbox" />
    <label>Data:</label>
    <input type="number" ng-model="data2" />
    <br/>
    <input type="checkbox" />
    <label>Data:</label>
    <input type="number" ng-model="data3" />
    <br/>
    <input type="checkbox" />
    <label>Data:</label>
    <input type="number" ng-model="data4" />
    <br/>
    <input type="checkbox" />
    <label>Data:</label>
    <input type="number" ng-model="data5" />
    <br/>
    <div id="data">{{data1 +","+ data2 +","+ data3 +","+ data4 +","+ data5}}</div>
  </div>
</body>

</html>

Answer 1

以下代码只是为了让您了解它的工作原理。你可以扩展这个想法。它是您必须使用的ng-if。 ng-if文档here。

<div id="form">
<input type="checkbox" ng-model="check1" />
<label>Data:</label>
<input type="number" ng-model="data1" />    
<span ng-if="check1">{{data1}}</span>
</div>

Answer 2

如果我理解正确，您希望在<div id="data">中隐藏那些没有选中复选框的号码。为此，您的复选框也需要ng模型：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <title>jQueryForm</title>
</head>

<body ng-app="">
  <div id="form" ng-init="dataSet = [{},{},{},{},{}]">
    <div ng-repeat="data in dataSet">
      <input type="checkbox" ng-model="data.checked"/>
      <label>Data:</label>
      <input type="number" ng-model="data.number" />
      <br/>
    </div>
    
    <span ng-repeat="data in dataSet">
      <span ng-if="data.checked">{{data.number}}</span>
      <span ng-if="!$last">,</span>
    </span>
   
</body>

</html>

＆＃13;

现在，我在这里做了很多事情。首先，我假设您希望解决方案适用于超过5个元素。这就是ng-init的用途。它将范围变量dataSet初始化为5个对象的数组。当然，这应该来自一个控制器，但为了在这里保持HTML，我使用了ng-init。

其次，我使用ng-repeat迭代dataSet中的对象并重复创建DOM对象。

接下来，我给了一个ng-model复选框（即data.checked），对应dataSet[$index].checked。

最后但并非最不重要的是，输出也在ng-repeat处理 - 以使其可调整为dataSet的大小。 $last是ng-repeat范围内的特殊变量，如果它是最后一个元素，则为真。

Answer 3

有多种方法可以解决这个问题。基本思想是你必须提供复选框和输入字段之间的链接。它需要一种基于已检查项目显示/隐藏输入字段的方法。

Check this plunk here

  <body ng-app="checkboxExample">
  <script>
    angular.module('checkboxExample', [])
      .controller('ExampleController', ['$scope', function($scope) {
        $scope.dataModel={};
        $scope.checkboxOptions = {
          data1: true,
          data2: true,
          data3: true,
          data4: true,
          data5: true,
        };
        //or 
        // $scope.checkboxOptions ={}; //this will generate falsey statement for checkboxOptions.data1
      }]);
  </script>
  <div id="form" ng-controller="ExampleController">
    <input type="checkbox" ng-model="checkboxOptions.data1" />
    <label>Data:</label>
    <input type="number" ng-if="checkboxOptions.data1" ng-model="dataModel.data1" />
    <br/>
    <input type="checkbox" ng-model="checkboxOptions.data2" />
    <label>Data:</label>
    <input type="number" ng-if="checkboxOptions.data2" ng-model="dataModel.data2" />
    <br/>
    <input type="checkbox" ng-model="checkboxOptions.data3" />
    <label>Data:</label>
    <input type="number" ng-if="checkboxOptions.data3" ng-model="dataModel.data3" />
    <br/>
    <input type="checkbox" ng-model="checkboxOptions.data4" />
    <label>Data:</label>
    <input type="number" ng-if="checkboxOptions.data4" ng-model="dataModel.data4" />
    <br/>
    <input type="checkbox" ng-model="checkboxOptions.data5" />
    <label>Data:</label>
    <input type="number" ng-if="checkboxOptions.data5" ng-model="dataModel.data5" />
    <br/>
    <div id="data">{{dataModel.data1 +","+ dataModel.data2 +","+ dataModel.data3 +","+ dataModel.data4 +","+ dataModel.data5}}</div>
  </div>
</body>

如何检测检查了哪些复选框，然后显示其编号

3 个答案: