显示控制器的复选框值

时间:2016-10-04 08:42:30

标签: html angularjs

我想显示某些复选框值。应从控制器调用这些值。因为,我需要保存值,我最好在控制器中声明值,然后在html中使用它。使用我的代码,我无法从控制器获取值。我的代码,

{{ngapp}}.controller(
        "SAdController",
        function($scope){

$scope.items = [{
	name: 'Printability',
	value: true
	}, {
	name: 'Defectivity',
	value: true
	}, {
	name: 'Process Window',
	value: true
	}, {
	name: 'Parametric Shift',
	value: true
	}, {
	name: 'Yield Impact',
	value: true
	}, {
	name: 'Reliability',
	value: true
	}, {
	name: 'Other',
	value: true
}];
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- HTML -->

<div class="form-group">
  <td><label>Main Concern</label></td>
  </br>
  <tr><input type="checkbox" ng-model="arform.mainconcern" ng-repeat="item in items"
                          
    <td>{{item.name}}</td>
  </tr>
</div>

我确实寻找过类似的头衔,遗憾的是我没有得到合适的解决方案。有人可以帮忙吗?谢谢。

4 个答案:

答案 0 :(得分:1)

你的ng-model不正确: 将您的ng-model="item.value"更改为$(".currency-target").change(function () { $.ajax({ url: "currency.txt", dataType: "text", success: function (data) { var CurrVal = $('.currency-target :selected').val(); data = data.split("\r\n"); for (var i = 0; i < data.length; i++) { element = data[i].split(": "); //element[0] as key and element[1] as value if (CurrVal == element[0]) { alert(element[0] + "=>" + element[1]); } } } }); }); ,您应该好好去。

答案 1 :(得分:1)

IMO,当你有多个复选框元素时,你应该使用ng-repeat和父元素。

<li ng-repeat="item in items">
     <input type="checkbox" ng-model="item.value" />{{item.name}}
</li>

此外,您可以根据需要使用ng-checked, ng-true-value, ng-false-value

Reference of input[checkbox]

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

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.items = [{
                        name: 'Printability',
                        value: true
                        }, {
                         name: 'Defectivity',
                         value: true
                          }, {
                            name: 'Process Window',
                            value: true
                          }, {
                            name: 'Parametric Shift',
                            value: true
                          }, {
                            name: 'Yield Impact',
                            value: true
                          }, {
                            name: 'Reliability',
                            value: true
                          }, {
                            name: 'Other',
                            value: true
                          }];
}]);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="GreetingController">
<li ng-repeat="item in items">
              <input type="checkbox" ng-model="item.value" />{{item.name}}
</li>
</body>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

以下是plunkr

<强> HTML

<!DOCTYPE html >
<html ng-app="myApp">
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="myControl">
 <table>
             <tr>
              <td><label>Main Concern</label></td> 
             </tr>
             <tr ng-repeat="item in items">
              <td><input type="checkbox" ng-model="item.value"/>
              </td>
              <td>
                {{item.name}}
              </td>
             </tr>
             </table>


 <button type="button" ng-click="getValues()">Get Values</button>
              {{checkedValues}}
  </body>

</html>

<强>的script.js

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

app.controller("myControl",['$scope',function($scope){

  $scope.items = [{
                        name: 'Printability',
                        value: true
                        }, {
                         name: 'Defectivity',
                         value: true
                          }, {
                            name: 'Process Window',
                            value: true
                          }, {
                            name: 'Parametric Shift',
                            value: true
                          }, {
                            name: 'Yield Impact',
                            value: true
                          }, {
                            name: 'Reliability',
                            value: true
                          }, {
                            name: 'Other',
                            value: true
                          }];
  $scope.getValues=function(){
    $scope.checkedValues=[]
    angular.forEach($scope.items,function(item){

      if(item.value){
        $scope.checkedValues.push(item.name);

      }

    })

  }

}])

答案 3 :(得分:0)

试试这个

ChildWindowFromPoint

<强> FULL EXAMPLE