我有以下代码:
http://plnkr.co/edit/RqLurBaCsgjQjOYMtl8r?p=preview
这里有一个文本框，当用户向文本框添加内容并按下添加按钮时，输入的文本应该添加到表格中，这是我的 javaScript 代码:
var app = angular.module('app', []);
app.factory('Service', function() {
var typesHash = [ {
id : '1',
name : 'lemon',
price : 100,
unit : 2.5
}, {
id : '2',
name : 'meat',
price : 200,
unit : 3.3
} ];
var service = {
addTable : addTable,
getData : getData,
};
return service;
function addTable(data) {
typesHash.push(data);
}
function getData() {
return typesHash;
}
});
app.controller('table', function(Service) {
//get the return data from getData funtion in factory
this.typesHash = Service.getData();
this.testData = {
id : '1',
name : "test",
price : 100,
unit : 2.5
};
//get the addtable function from factory
this.addTable = Service.addTable;
});
这里只要 testData 是静态的，就可以正常工作:
this.testData = {
id : '1',
name : "test",
price : 100,
unit : 2.5
};
但是这里文本框中的文本没有添加，所以我将上面的代码更改如下:
this.testData = {
id : '1',
name : $("#txt").val(),
price : 100,
unit : 2.5
};
名称什么也没得到，行已添加，但名称点为空？
请注意，这是我的真实代码的更简单版本，我有理由使用工厂。 ahyone 可以帮我找出为什么该表无法正确连接到文本框吗？
最佳答案
plnkr 的修改版本(哦，很好的设计更改)。
已更新之前粘贴了错误的 plnkr 链接。 http://plnkr.co/edit/4g7LGRLBNEH2LeuEm1qN?p=preview
帖子中的代码，如果这没有涵盖您想象的某些场景，请告诉我。我尝试摆脱所有的样式缺陷，这应该在 CSS 中完成，或者使用 bootstrap 提供的 text-right 或 text-center 之类的东西。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<title>Insert title here</title>
<script>
var app = angular.module('app', []);
app.factory('Service', function() {
var typesHash = [ {
id :1,
name : 'lemon',
price : 100,
unit : 2.5
}, {
id : 2,
name : 'meat',
price : 200,
unit : 3.3
} ];
var localId = 3;
var service = {
addTable : addTable,
getData : getData,
};
return service;
function addTable(name) {
typesHash.push({id:localId++, name:name, price:100,unit:1});
}
function getData() {
return typesHash;
}
});
app.controller('table', function(Service) {
//get the return data from getData funtion in factory
this.typesHash = Service.getData();
//get the addtable function from factory
this.addTable = Service.addTable;
});
</script>
</head>
<body ng-app="app" ng-controller="table as tableTools">
<form>
<div class="row commonRow">
<div class="col-xs-1 text-right">
item:
</div>
<div class="col-xs-5">
<input id="txt" type="text" style="width: 100%;" ng-model="tableTools.inputData" />
</div>
<div class="col-xs-2">
<button class="btn btn-primary" ng-click="tableTools.addTable(tableTools.inputData);tableTools.inputData=''">
click me
</button>
</div>
</div>
</form>
<div class="row commonRow">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<table class="table table-hover">
<thead>
<tr>
<th>item</th>
</tr>
</thead>
<tbody ng-controller="table as iterateTb">
<tr ng-repeat="x in iterateTb.typesHash track by x.id">
<td>
<div>{{x.name}}</div>
</td>
<td>
<input type="text" ng-model="x.name"/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
关于angularjs - 无法在表格中添加文本框输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28145131/