2đź‘Ť
I think, you shouldn’t be using ng-init here
This directive can be abused to add unnecessary amounts of logic into
your templates
What’s happening here is that you have a local variable defined in your javascript called data that is being used by angular to update form field. However the trouble is that in your HTML each row over writes the data variable. So they all end up having the same variable.
Further, it’s not always a good idea to combine the Django loop and the Angular loop particularly if you use ng-init.
I think your right approach is to deliver the user_statuses as an ajax response and loop through it with ng-repeat.
👤e4c5
0đź‘Ť
I am able to achieve my goal using the {%for%} in the controller.This loop will take the data from the list one by one and append in to the list “dataList” in controller.This list will be printed in the rows of table by HTML using “ng-repeat”.Below is my code:
<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>
👤space earth
- [Answered ]-Colorful.core.ColorfulError: the color "default" is unknown. Use a color in your color palette (by default: X11 rgb.txt)
- [Answered ]-Update / Save model date value directly from template?
- [Answered ]-Django: Update object from view, with no model or template
- [Answered ]-Cannot server static files with nginx in django
Source:stackexchange.com