Angularjs 如何检测已选中的复选框，然后显示其编号_Angularjs

Angularjs 如何检测已选中的复选框，然后显示其编号

angularjs

Angularjs 如何检测已选中的复选框，然后显示其编号,angularjs,Angularjs,我已经学习angular三天了，我遇到了一个小挑战，但我仍然不知道如何使用angular.js解决它，我已经搜索了它，但很难解释我想要完成什么我想检测哪些复选框被选中，然后在输入中显示其复选框被选中的数字这是一幅画（请原谅我的解释）： [十] | 3 uuuuuuuuuuuuuuuuuuuuu124; [124;]4 uuuuuuuuuuuuuuuuuu124; [十] | 10|uuuuuuuuuuuuuuuuuuuuuuu124; [十] | 4 uuuuuuuuuuuuuuuuuuuu

我已经学习angular三天了，我遇到了一个小挑战，但我仍然不知道如何使用angular.js解决它，我已经搜索了它，但很难解释我想要完成什么

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

这是一幅画（请原谅我的解释）：

我的代码：


jQueryForm
数据：


数据：


数据：


数据：


数据：


{{data1+”、“+data2+”、“+data3+”、“+data4+”、“+data5}}
下面的代码只是让您了解它的工作原理。你可以扩展这个想法。您必须使用的是ng if
<代码>ng如果
文档

数据：
{{data1}}
下面的代码只是让您了解它的工作原理。你可以扩展这个想法。您必须使用的是ng if
<代码>ng如果
文档

数据：
{{data1}}
如果我理解正确，您希望在
中隐藏那些没有复选框的数字。为此，您的复选框还需要ng模型：


jQueryForm
数据：


{{data.number}
,
如果我理解正确，您希望在
中隐藏那些没有复选框的数字。为此，您的复选框还需要ng模型：


jQueryForm
数据：


{{data.number}
,
有多种方法可以解决这个问题。基本思想是必须提供复选框和输入字段之间的链接。它需要一种基于选中项显示/隐藏输入字段的方法


angular.module（'checkboxExample'，[]）
.controller（'ExampleController'，['$scope'，function$scope）{
$scope.dataModel={}；
$scope.checkboxOptions={
数据1：是的，
数据2：是的，
数据3：是的，
数据4：是的，
数据5：是的，
};
//或
//$scope.checkboxOptions={}；//这将为checkboxOptions.data1生成错误语句
}]);
数据：


数据：


数据：


数据：


数据：


{{dataModel.data1+”、“+dataModel.data2+”、“+dataModel.data3+”、“+dataModel.data4+”、“+dataModel.data5}}
有多种方法可以解决这个问题。基本思想是必须提供复选框和输入字段之间的链接。它需要一种基于选中项显示/隐藏输入字段的方法


angular.module（'checkboxExample'，[]）
.controller（'ExampleController'，['$scope'，function$scope）{
$scope.dataModel={}；
$scope.checkboxOptions={
数据1：是的，
数据2：是的，
数据3：是的，
数据4：是的，
数据5：是的，
};
//或
//$scope.checkboxOptions={}；//这将为checkboxOptions.data1生成错误语句
}]);
数据：


数据：


数据：


数据：


数据：


{{dataModel.data1+”、“+dataModel.data2+”、“+dataModel.data3+”、“+dataModel.data4+”、“+dataModel.data5}}

<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>

  <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>