Question

我希望每次找到新数据项时动态创建一个表单，其中包含三个输入。每当最终用户点击所选字段名称的特定复选框时，必须将对应于表单组的其他输入值提交给控制器功能。我为布局创建了JSFiddle。

<div class="panel panel-primary" ng-controller="citycontroller as ctrl">
     <div class="panel-heading">
        Available Cities

     </div>
     <div class="panel-body">
     <h4>
     {{data}}
     </h4>
         <div ng-repeat="x in data" class="[ form-group form-inline ]">
             <input class="form-control input-md" type="checkbox" id="{{x.name}}" ng-model="name" autocomplete="off" />
             <div class="[ btn-group ]">
                 <label for="{{x.name}}" class="[ btn btn-success ]">
                     <span class="[ glyphicon glyphicon-ok ]"></span>
                     <span> </span>
                 </label>                                                                    <label for="{{x.name}}" class="[ btn btn-default active ]">
                      {{x.name}}
                 </label>
             </div>
             <input class="form-control input-md" type="text" placeholder="periodicity" id="x.periodicity" autocomplete="off" />
         </div>
         <button type="button" class="btn btn-info" style="float: right" ng-click="ctrl.addInfo()">Add</button>
     </div>
</div>

控制器方法如下：

var mainApp = angular.module('cityinfo',[]);
mainApp.controller('citycontroller', function($scope,$http,$window,$interval) {

var cities=[{"name":"hyd","periodicity":"5"},{"name":"chn","periodicity":"5"},{"name":"blr","periodicity":"5"}];

$scope.data = cities;

this.addInfo=function() {
        console.log('update city information...');
        //get list of city names that are selected by the user in the form here and print their values
    }  
 });

没有想到如何在控制器方法addInfo（）中检索表单值。在这方面，任何人都可以帮助我。

Answer 1

您需要使用ng-model跟踪选中的复选框。

一种方法如下：

HTML：

<div ng-repeat="city in cities">
    <input type="checkbox" ng-model="city.checked" />
</div>

JS：

$scope.cities = [{
    name: 'foo',
    periodicity: 5,
    checked: false
}, {
    name: 'bar'
    periodicity: 6,
    checked: false
}]

$scope.addInfo = function() {
    // Using lodash
    _($scope.cities).filter({checked: true}).each(function(city) {
       // do stuff
    }
}

Answer 2

您根本不必更改代码。只需更改输入的ng模型即可实现：

HTML

     </div>
     <div class="panel-body">
     <h4>
     {{data}}
     </h4>
         <div ng-repeat="x in data" class="[ form-group form-inline ]">
             <input class="form-control input-md" type="checkbox" id="{{x.name}}" ng-model="x.value" autocomplete="off" />
             <div class="[ btn-group ]">
                 <label for="{{x.name}}" class="[ btn btn-success ]">
                     <span class="[ glyphicon glyphicon-ok ]"></span>
                     <span> </span>
                 </label>   
                 <label for="{{x.name}}" class="[ btn btn-default active ]">
                      {{x.name}}
                 </label>
             </div>
             <input class="form-control input-md" type="text" placeholder="periodicity" id="x.periodicity" autocomplete="off" />
         </div>
         <button type="button" class="btn btn-info" style="float: right" ng-click="ctrl.addInfo()">Add</button>
     </div>
</div>

SCRIPT

var mainApp = angular.module('myApp',[]);
            mainApp.controller('citycontroller', function($scope) {

var cities=[{"name":"hyd","periodicity":"5"},{"name":"chn","periodicity":"5"},{"name":"blr","periodicity":"5"}];

$scope.data = cities;

this.addInfo=function() {
        console.log($scope.data);
        //get list of city names that are selected by the user in the form here and print their values
    }  
 });

在浏览器控制台中检查值。如果选中复选框，则为真。

无法将动态表单输入传递给控制器功能

2 个答案:

无法将动态表单输入传递给控制器​​功能

2 个答案:

无法将动态表单输入传递给控制器功能