ngInit无法与AngularJS和Django一起正常使用
[英]ngInit not working properly with AngularJS and Django
问题描述
我将元组列表从视图传递到模板，如以下view.py所示：
def index(request):
page_index = int(request.GET["page"])
s_page = (page_offset*page_index) + 1
e_page = (page_index + 1)*page_offset
user_statuses = get_user_status()
user_statuses.sort(key=lambda user_statuses: datetime.datetime.strptime(user_statuses[0], '%Y-%m-%d'),reverse=True)
print user_statuses
user_statuses = user_statuses[s_page : e_page+1]
print user_statuses
return render(request, 'view_status.html', {'lists': user_statuses,'next_page':page_index+1,'prev_page':page_index-1})
user_statuses是元组列表。
下面是我的模板：
<body>
<div ng-app="appTable">
<div ng-controller="Allocation">
<h2><span>VIEW STATUS</span></h2>
<a ng-href="/welcome_page/">Return to Welcome Page</a><br><br>
Select start date:
<input type="text"
datepicker
ng-model="start_date" />
<br>
<br>
Select end date:
<input type="text"
datepicker
ng-model="end_date" />
<br>
<br>
<button ng-click="Submit()"> Submit </button>
{%verbatim%} {{error}}{%endverbatim%}
{%verbatim%} {{msg}}{%endverbatim%}
<br>
<table>
<th bgcolor="#35a5f0">
<td bgcolor="#35a5f0">Date</td>
<td bgcolor="#35a5f0">Project</td>
<td bgcolor="#35a5f0">Release</td>
<td bgcolor="#35a5f0">Feature</td>
<td bgcolor="#35a5f0">Module name</td>
<td bgcolor="#35a5f0">Hours spent</td>
<td bgcolor="#35a5f0">Comment</td>
</th>
</thead>
<tbody>
{%for list in lists%}
<tr>
{{list.0}} {{list.1}}
<td><input type="checkbox" ng-model="data.isDelete"/></td>
<td>
<div ui-view ng-init="data.date='{{list.0}}'" >
<input type="text"
datepicker
ng-model="data.date" />
</div>
</td>
<td>
<div ng-init="data.dept='{{list.1}}' " >
<input type="text" ng-model="data.dept" />
</div>
</td>
<td>
<select ng-model="data.release" ng-options="x for x in range">
</select>
</td>
<td>
<select ng-model="data.feature" ng-options="x for x in feature">
</select>
</td>
<td>
<input type = "text" ng-model = "data.modulename">
</td>
<td>
<select ng-model="data.hours" ng-options="x for x in hours">
</select>
</td>
<td>
<input type = "text" ng-model = "data.comment">
</td>
</tr>
{% endfor %}
</tbody>
</table>
<a ng-href="/view_status/?page={{prev_page}}">Previous</a>
<a ng-href="/view_status/?page={{next_page}}">Next</a>
</div>
</div>
</body>
这是我的AJ脚本：
<script>
var app = angular.module("appTable", []);
app.controller("Allocation", function($scope, $http) {
$scope.start_date = "2017-05-01";
$scope.end_date = "2017-05-19";
$scope.data = {}
$scope.hours = ["1", "2", "3"];
$scope.range = ["1", "2", "3"];
$scope.feature = ["UT", "FSDS", "Coding", "QA"];
$scope.postData = function(s_date, e_date) {
console.log('post called');
var data = {
s_date: s_date,
e_date: e_date,
};
console.log(data);
$http.post('/view_status/', data).then(function(response) {
if (response.data)
$scope.msg = "Data Submitted Successfully!";
}, function(response) {
$scope.msg = "Service not Exists";
$scope.statusval = response.status;
$scope.statustext = response.statusText;
$scope.headers = response.headers();
});
};
});
app.directive("datepicker", function() {
function link(scope, element, attrs, controller) {
// CALL THE "datepicker()" METHOD USING THE "element" OBJECT.
element.datepicker({
onSelect: function(dt) {
scope.$apply(function() {
// UPDATE THE VIEW VALUE WITH THE SELECTED DATE.
controller.$setViewValue(dt);
});
},
dateFormat: "yy-mm-dd" // SET THE FORMAT.
});
}
return {
require: 'ngModel',
link: link
};
});
</script>
来自view.py的字典user_statuses的值如下：
[(u'2017-05-02', u'p2', u'1', u'UT', u'pqr', u'1', u'Add extra information'), (u'2017-05-01', u'p1', u'1', u'UT', u'abc', u'1', u'Add extra information')]
我的输出：
如您所见，当我打印{{list.0}}和{{list.1}}时，它显示了正确的输出。 但是，当我使用ng-init在表中显示相同的值时，则在两行中都向我显示了相同的值，这就是问题所在。 请帮忙。
2 个解决方案
解决方案1
2 2017-05-24 11:30:45
我认为，您不应在此处使用ng-init
可以滥用此指令在模板中添加不必要的逻辑量
这里发生的事情是，您在javascript中定义了一个局部变量，该局部变量称为data ，angular使用它来更新表单字段。 但是麻烦的是，在HTML中，每一行都覆盖了data变量。 因此，它们最终都具有相同的变量。
此外，结合使用Django循环和Angular循环并非总是一个好主意，尤其是在使用ng-init的情况下。
我认为您的正确方法是将user_statuses作为ajax响应提供，并使用ng-repeat遍历它。
解决方案2
0 2017-05-25 06:11:43
我可以使用控制器中的{％for％}来实现我的目标。此循环将从列表中获取数据，并将其追加到控制器中的“ dataList”列表中。该列表将打印在行中使用“ ng-repeat”通过HTML进行表格分析。下面是我的代码：
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<style>
h2 {
width: 100%;
text-align: center;
color:#35a5f0;
line-height: 1em;
margin: 10px 0 20px;
background-color:#35a5f0;
}
h2 span {
background:#fff;
padding:0 10px;
}
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<body>
<div ng-app="appTable">
<div ng-controller="Allocation">
<h2><span>VIEW STATUS</span></h2>
<a ng-href="/welcome_page/">Return to Welcome Page</a><br><br>
Select start date:
<input type="text"
datepicker
ng-model="start_date" />
<br>
<br>
Select end date:
<input type="text"
datepicker
ng-model="end_date" />
<br>
<br>
<button ng-click="Submit()"> Submit </button>
{%verbatim%} {{error}}{%endverbatim%}
{%verbatim%} {{msg}}{%endverbatim%}
<br>
<span ng-init="add()"></span>
<table>
<th bgcolor="#35a5f0">
<td bgcolor="#35a5f0">Date</td>
<td bgcolor="#35a5f0">Project</td>
<td bgcolor="#35a5f0">Release</td>
<td bgcolor="#35a5f0">Feature</td>
<td bgcolor="#35a5f0">Module name</td>
<td bgcolor="#35a5f0">Hours spent</td>
<td bgcolor="#35a5f0">Comment</td>
</th>
<tr ng-repeat="data in dataList">
<td><input type="checkbox" ng-model="data.isDelete"/></td>
<td>
<input type="text"
datepicker
ng-model="data.date" />
</td>
<td><input type="text" ng-model="data.dept"/></td>
<td>
<select ng-model="data.release" ng-options="x for x in range">
</select>
</td>
<td>
<select ng-model="data.feature" ng-options="x for x in feature">
</select>
</td>
<td>
<input type = "text" ng-model = "data.modulename">
</td>
<td>
<select ng-model="data.hours" ng-options="x for x in hours">
</select>
</td>
<td>
<input type = "text" ng-model = "data.comment">
</td>
</tr>
</table>
<a ng-href="/view_status/?page={{prev_page}}">Previous</a>
<a ng-href="/view_status/?page={{next_page}}">Next</a>
</div>
</div>
</body>
<script>
var app = angular.module("appTable", []);
app.controller("Allocation", function($scope, $http) {
$scope.start_date = "2017-05-01";
$scope.end_date = "2017-05-15";
$scope.data = {}
$scope.hours = ["1", "2", "3"];
$scope.range = ["1", "2", "3"];
$scope.feature = ["UT", "FSDS", "Coding", "QA"];
$scope.dataList = [];
$scope.displayList = [];
$scope.update_data = function(dept) {
data.dept = dept;
};
$scope.postData = function(s_date, e_date) {
console.log('post called');
var data = {
s_date: s_date,
e_date: e_date,
};
console.log(data);
$http.post('/view_status/', data).then(function(response) {
if (response.data)
$scope.msg = "Data Submitted Successfully!";
}, function(response) {
$scope.msg = "Service not Exists";
$scope.statusval = response.status;
$scope.statustext = response.statusText;
$scope.headers = response.headers();
});
};
$scope.add = function() {
{ %
for list in lists %
}
var data1 = {};
data1 = {
date: '{{list.0}}',
dept: '{{list.1}}',
release: '{{list.2}}',
feature: '{{list.3}}',
modulename: '{{list.4}}',
hours: '{{list.5}}',
comment: '{{list.6}}'
};
$scope.dataList.push(data1);
{ % endfor %
}
};
});
app.directive("datepicker", function() {
function link(scope, element, attrs, controller) {
// CALL THE "datepicker()" METHOD USING THE "element" OBJECT.
element.datepicker({
onSelect: function(dt) {
scope.$apply(function() {
// UPDATE THE VIEW VALUE WITH THE SELECTED DATE.
controller.$setViewValue(dt);
});
},
dateFormat: "yy-mm-dd" // SET THE FORMAT.
});
}
return {
require: 'ngModel',
link: link
};
});
</script>
</html>
AngularJS - 在ngRepeat中重置ngInit
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.