表格中添加了空行，但在模态弹出窗体中输入值后，行值未反映。
这是我已经添加了ng-controller =“compctrl”的html片段。
<!-- BEGIN CONTAINER -->
<div class="page-container">
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<div class="page-content" ng-controller="compctrl">
<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
<!-- /.modal -->
<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
<!-- BEGIN PAGE HEADER-->
<!-- BEGIN PAGE HEAD -->
<div class="page-head">
<!-- BEGIN PAGE TITLE -->
<div class="page-title">
<h1>Deep discounts</h1>
</div>
<!-- END PAGE TITLE -->
<!-- BEGIN PAGE TOOLBAR -->
<!-- END PAGE TOOLBAR -->
</div>
<!-- END PAGE HEAD -->
<!-- BEGIN PAGE BREADCRUMB -->
<ul class="page-breadcrumb breadcrumb">
<li>
<a href="index.html">Home</a>
<i class="fa fa-circle"></i>
</li>
<li>
<a href="#">Discounts</a>
<i class="fa fa-circle"></i>
</li>
<li>
<a href="#">Deep Discounts</a>
</li>
</ul>
<!-- END PAGE BREADCRUMB -->
<!-- END PAGE HEADER-->
<!-- BEGIN PAGE CONTENT-->
<div class="clearfix">
<button type="button" class="btn btn-primary green pull-right" data-toggle="modal" data-target="#myModal">Add new field</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" >
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add New Discount</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" ng-submit="addRow()">
<div class="form-group">
<label class="col-md-3 control-label">Name</label>
<div class="col-md-9">
<input type="text" class="form-control" name="name" ng-model="name">
<span class="help-block">A block of help text. </span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Strength</label>
<div class="col-md-9">
<input type="number" class="form-control" placeholder="Enter number" ng-model="strength">
<span class="help-block">A block of help number. </span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Location</label>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Enter text" ng-model="location">
<span class="help-block">A block of help text. </span>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-12">
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-globe"></i>Datatable with TableTools
</div>
<div class="tools">
</div>
</div>
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover" id="sample_1">
<thead>
<tr>
<th>
Name
</th>
<th>
Strength
</th>
<th>
Location
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="company in companies">
<td>{{company.name}}
</td>
<td>{{company.strength}}
</td>
<td>{{company.location}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- END EXAMPLE TABLE PORTLET-->
</div>
</div></div>
</div>
</div>
<!-- END CONTENT -->
<!-- END CONTAINER -->
这是app.js状态提供程序上下文：
.state('myDatatablesAdvanced', {
url: "/datatables/deepdiscount1",
templateUrl: "views/datatables/deepdiscount1.html",
data: {pageTitle: 'Advanced Datatables', pageSubTitle: 'advanced datatables samples'},
controller: "compctrl",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
files: [
'../../../assets/global/plugins/select2/select2.css',
'../../../assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css',
'../../../assets/global/plugins/datatables/extensions/Scroller/css/dataTables.scroller.min.css',
'../../../assets/global/plugins/datatables/extensions/ColReorder/css/dataTables.colReorder.min.css',
'../../../assets/global/plugins/select2/select2.min.js',
'../../../assets/global/plugins/datatables/all.min.js',
'js/scripts/table-advanced.js',
'js/controllers/tab.js'
]
});
}]
}
})
这是我创建的自定义控制器“compctrl”，用于在表格中添加值。
MetronicApp.controller('compctrl', ['$rootScope', '$scope', 'settings', function($rootScope, $scope, settings) {
$scope.$on('$viewContentLoaded', function() {
$scope.companies = [
{ 'name':'Infosys Technologies',
'strength': 125000,
'location': 'Bangalore'},
{ 'name':'Cognizant Technologies',
'strength': 100000,
'location': 'Bangalore'},
{ 'name':'Wipro',
'strength': 115000,
'location': 'Bangalore'},
{ 'name':'Tata Consultancy Services (TCS)',
'strength': 150000,
'location': 'Bangalore'},
{ 'name':'HCL Technologies',
'strength': 90000,
'location': 'Noida'},
];
$scope.addRow = function(){
$scope.companies.push({ 'name':$scope.name, 'strength': $scope.strength, 'location':$scope.location });
$scope.name='';
$scope.strength='';
$scope.location='';
};
// initialize core components
Metronic.initAjax();
});
}]);
我想通知我正在使用Metronic Theme.But当我以模态形式输入值时，它不会连续添加。只显示空行。
答案 0 :(得分：0)
可能是因为控制器（模板）和模态的范围问题。尝试使用$ rootscope或尝试将模态中的值广播到控制器，然后将其从控制器推入$ scope.companies。