Angularjs filling a table - angularjs

I am not able to enter a list in a table within the html of the body. This list came using Angularjs, ajax request with django. The incoming list contains other lists within it, which can vary in size every query. Example: [["a","b","c"],["a","b","c"],["a","b","c"]] or [["a","b","c","d","e"],["a","b","c","d","e"],["a","b","c","d","e"]]
File dfp_consulta.js
function ListDropdown($scope, $http) {
$scope.bvmf = {ccvms : [ '1023', '10456', '10472'],
consolidados : [ 't', 'f' ],
origens : [ 'ITR', 'DFP' ],
balancos : [ '1', '2', '3', '4'],
periodos : [ '1-3', '1-6', '1-9', '1-12' ],
anos : [ '1997', '1998', '1999', '2012' ]
$scope.range=[]
$scope.send=function(ccvm, consolidado, origem, balanco, periodo, ano, ano_doc){
$http({
method:'POST',
url:'/sending/',
data:ccvm+consolidado+origem+balanco+periodo+ano+ano_doc,
headers:{'Content-Type': 'application/x-www-form-urlencoded'},
}).success(function(c){
$scope.range=c
})
}
}
File dfp_consulta.html
{% extends "base.html" %}
{% block corpo %}
<div ng-app="" ng-controller="ListDropdown">
<select ng-model="ccvm" ng-options="ccvm as ccvm for ccvm in bvmf.ccvms"></select><br>
<select ng-model="consolidado" ng-disabled="!ccvm" ng-options="consolidado for consolidado in bvmf.consolidados" ></select><br>
<select ng-model="origem" ng-disabled="!consolidado" ng-options="origem for origem in bvmf.origens" ></select><br>
<select ng-model="balanco" ng-disabled="!origem" ng-options="balanco for balanco in bvmf.balancos" ></select><br>
<select ng-model="periodo" ng-disabled="!balanco" ng-options="periodo for periodo in bvmf.periodos" ></select><br>
<select ng-model="ano" ng-disabled="!periodo" ng-options="ano for ano in bvmf.anos" ></select><br>
<select ng-model="ano_doc" ng-disabled="!ano" ng-options="ano_doc for ano_doc in bvmf.anos" ng-change="send(ccvm,consolidado,origem,balanco,periodo,ano,ano_doc)"></select><br>
<table class='table table-hover'>
{% for i in range %}
<tr>
{% for s in i %}
<td>{{ s }}</td>
{% endfor %}
</tr>
{% endfor %}
</table>
</div>
{% endblock %}
I am getting in $scope.range for example, the following list [["a", "b", "c"] ["a", "b", "c"] ["a", "b "," c "]], however, {% for i in range %} is not using the range array

The problem is that both Django and AngularJS share the same syntax of Jinja2 for variable substitution in templates.
The easiest option would be to tell Django not to use it's syntax in places you need to use angularjs variable substitution - in other words, use verbatim tag:
{% block corpo %}
{% verbatim %}
<div ng-app="" ng-controller="ListDropdown">
<select ng-model="ccvm" ng-options="ccvm as ccvm for ccvm in bvmf.ccvms"></select><br>
<select ng-model="consolidado" ng-disabled="!ccvm" ng-options="consolidado for consolidado in bvmf.consolidados" ></select><br>
<select ng-model="origem" ng-disabled="!consolidado" ng-options="origem for origem in bvmf.origens" ></select><br>
<select ng-model="balanco" ng-disabled="!origem" ng-options="balanco for balanco in bvmf.balancos" ></select><br>
<select ng-model="periodo" ng-disabled="!balanco" ng-options="periodo for periodo in bvmf.periodos" ></select><br>
<select ng-model="ano" ng-disabled="!periodo" ng-options="ano for ano in bvmf.anos" ></select><br>
<select ng-model="ano_doc" ng-disabled="!ano" ng-options="ano_doc for ano_doc in bvmf.anos" ng-change="send(ccvm,consolidado,origem,balanco,periodo,ano,ano_doc)"></select><br>
<table>
<tr ng-model="item2" ng-repeat="item2 in range">
<td ng-repeat="item3 in item2">{{ item3 }}</td>
</tr>
</table>
</div>
{% endverbatim %}
{% endblock %}
The new table structure allows the build with angularjs amounts different of row and column <tr ng-repeat> and <td ng-repeat>
See also:
Integrate AngularJS with Django
Stackoverflow - Django not working with Angularjs

Related

In Synfony how do I divide a list according to the statut of his creator ? Error : Key for array with keys "0" does not exist

I'd like to display two lists of events : one list with events created by organizers with organizer status and a list with events created by organizers with member status. My conditions are like this : "if some event exist" and "if the organizer who created the event is an organizer (or a regular member)". For information, "organizer" and "member" depend on the status of the organizer. Because of the second condition, I had this error :
Key "organizer" for array with keys "0" does not exist.
I don't understand why... What needs to be corrected ?
Thank you very much for your help.
My twig file :
{% extends 'base.html.twig' %}
{% block title %}Liste des activités{% endblock %}
{% block main %}
<div class="events">
<div class="vr fixed-top start-50"></div>
<div class="row">
<div class="col-12 col-md-6">
<h2 class="text-center my-4">
<img src="{{ asset('img/titres/zpeak-sorties.svg') }}" alt="Les Zpeak Sorties !">
</h2>
<ul class="list-group">
{% if events and events.organizer.status == 'organizer' %}
{% for event in events %}
<a class="list-group-item list-group-item-action">
<img src="{{ asset('img/flag_images/' ~ event.spokenlanguage.image) }}" alt="Drapeau {{ event.spokenlanguage.name }}" class="me-2"> {{ event.title }}
</a>
{% endfor %}
{% else %}
<p>Il n'y a pas de zpeak sortie organisée.</p>
{% endif %}
</ul>
</div>
<div class="col-12 col-md-6">
<h2 class="text-center my-4">
<img src="{{ asset('img/titres/zpeak-idees.svg') }}" alt="Les Zpeak Idées !">
</h2>
<ul class="list-group">
{% if events and events.organizer.status == 'member' %}
{% for event in events %}
<a class="list-group-item list-group-item-action">
<img src="{{ asset('img/flag_images/' ~ event.spokenlanguage.image) }}" alt="Drapeau {{ event.spokenlanguage.name }}" class="me-2"> {{ event.title }}
</a>
{% endfor %}
{% else %}
<p>Il n'y a pas de zpeak idée proposée.</p>
{% endif %}
</ul>
</div>
</div>
</div>
{% endblock %}
My EventsController.php file :
<?php
namespace App\Controller\Front;
use App\Form\SearchType;
use App\Repository\EventsRepository;
use App\Repository\CategoriesRepository;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Session\SessionInterface;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
class EventsController extends AbstractController
{
#[Route('/search', name: 'search')]
public function search(Request $request, SessionInterface $sessionInterface)
{
$data = $request->request->all();
$sessionSearchFormData = $sessionInterface->get('searchFormData');
$form = $this->createForm(SearchType::class, ['data' => $sessionSearchFormData]);
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
$data = $form->getData();
$sessionInterface->set('searchFormData', $data);
return $this->redirectToRoute('events', [$data]);
}
return $this->renderForm('front/search.html.twig', [
'form' => $form
]);
}
#[Route('/events', name: 'events')]
public function events(
EventsRepository $eventsRepository,
CategoriesRepository $categoriesRepository
){
$events = $eventsRepository->findAll();
dd($events);
$categories = $categoriesRepository->findAll();
return $this->render("front/events.html.twig", ['events' => $events, 'categories' => $categories]);
}
}
dd($events) in EventsController.php :
EventsController.php on line 45:
array:1 [▼
0 => App\Entity\Events {#1026 ▼
-id: 1
-title: "Soirée à Belleville"
-description: "Viens boire un verre, rencontrer des natifs et pratiquer l'espagnol !"
-category: Proxies\__CG__\App\Entity\Categories {#933 ▶}
-spokenlanguage: Proxies\__CG__\App\Entity\Language {#981 ▶}
-address: Proxies\__CG__\App\Entity\Location {#744 ▶}
-date: DateTime #1665446400 {#1022 ▶}
-starttime: DateTime #72000 {#1023 ▶}
-endtime: DateTime #86340 {#1024 ▶}
-organizer: Proxies\__CG__\App\Entity\User {#996 ▼
-id: 1
-email: null
-roles: []
-password: null
-gender: null
-lastname: null
-firstname: null
-birthdate: null
-occupation: null
-photo: null
-status: null
-nationality: null
-nativelanguage: null
+__isInitialized__: false
…2
}
-participations: Doctrine\ORM\PersistentCollection {#1002 ▶}
}
]
In your case, you can have many Events, so in your twig, you need to use a for loop.
Place your for loop before the if.
Something like this :
<ul class="list-group">
{% for event in events %}
{% if event and event.organizer.status == 'organizer' %}
<a class="list-group-item list-group-item-action">
<img src="{{ asset('img/flag_images/' ~ event.spokenlanguage.image) }}" alt="Drapeau {{ event.spokenlanguage.name }}" class="me-2"> {{ event.title }}
</a>
{% else %}
<p>Il n'y a pas de zpeak sortie organisée.</p>
{% endif %}
{% endfor %}
</ul>
In case you are sure to have only one item, you can use events[0].organizer.status == 'organizer'
Regards,

CKAN - adding custom fields with ckenxt-scheming

i'm working with ckanext-scheming and trying to add a custom field similar to repeating subfields with few modifications (below are few files that define the field and it's behavior), for the most part it works correct but it doesn't get submitted to the database (although once i intercept the package create action, i can see the field data is there), any ideas are welcomed:
the scheming yaml part:
- field_name: tag_string
label: Tags
form_snippet: custom_tags.html
display_snippet: modified_repeating_subfields.html
help_text: >-
Additional keywords useful for ...
the form snippet:
{% import 'macros/form.html' as form %}
{% asset 'ckanext-dalrrdemcdcpr/facets-active-js' %}
{%
set options=[
{'value': '001', 'text': _('Discipline')}
, {'value': '002', 'text': _('Place')}
, {'value': '003', 'text': _('Stratum')}
, {'value': "004", "text":_("Temporal")}
, {'value': "005", "text":_("Theme")}
]
%}
{%- set extra_html = caller() if caller -%}
{% set classes = (classes|list) %}
{% call form.input_block(field.field_name, field.label, "", classes, extra_html=extra_html, is_required=false) %}
<div class="repeating_custom_tag_row-index-0" id="repeating_custom_tag_row-index-0" data-module="repeating_tags_handler">
<div class="metadata_tags_holder">
<div class="metadata_tags_styler">
<div class="metadata_tags_input">
<label for="custom_delete" class="input-group-text">{{ _('Input tag') }}</label>
<input class="form-control" id="repeating_custom_tag_row-index0-tag-input-index-0" type="text" name="repeating_custom_tag_row-index0-tag-input-index-0" value="" placeholder=""/>
</div>
<div class="metadata_tags_type_select">
<div><label for="tag_select" class="input-group-text">{{_('Input tag type')}}</label></div>
<select id="tag_select" name="repeating_custom_tag_row-index0-select-input-index-0" required>
{% for option in options %}
<option value="{{ option.value }}"{% if option.value == selected %} selected{% endif %}>{{ option.text or option.value }}</option>
{% endfor %}
</select>
</div>
<div class="tags_buttons_wrapper">
<div class="tags_handling_buttons">
<button class="btn btn-success add_metadata_tags_btn">Add</button>
<button class="btn btn-danger remove_metadata_tags_btn"><i class="fa fa-trash"></i>Remove</button>
</div>
</div>
</div>
</div>
</div>
{% endcall %}
the display snippet (don't think it's useful):
{% set fields = data[field.field_name] %}
{% block subfield_display %}
{% for field_data in fields %}
<div class="panel panel-default">
<div class="panel-body">
<dl class="scheming-subfield-list">
{% for subfield in field.repeating_subfields %}
<dt class="dataset-label">
{{ h.scheming_language_text(subfield.label) }}
</dt>
<dd>
{%- snippet 'scheming/snippets/display_field.html',
field=subfield,
data=field_data,
entity_type=entity_type,
object_type=object_type
-%}
</dd>
{% endfor %}
</dl>
</div>
</div>
{% endfor %}
{% endblock %}
this is how the relevant part of the form looks (the tags):
the js module controlling tags fields behavior:
ckan.module("repeating_tags_handler", function ($){
/*
control muliple interaction regarding the tags
section, handles both css and buttons behavior.
*/
return {
initialize: function(){
$.proxyAll(this,/_on/);
// set the styles before copying the section
let add_btns = $(".add_metadata_tags_btn")
add_btns.each((idx,add_btn) => {add_btn.style.marginRight="2px"})
$(document).on('click','.add_metadata_tags_btn',this._on_add_tags)
$(document).on('click','.remove_metadata_tags_btn',this._on_remove_tags)
let repeating_fields_wrapper = $(".repeating_custom_tag_row-index-0")
repeating_fields_wrapper.css({"margin-bottom":"30px"})
let tags_holder = $(".metadata_tags_holder")
tags_holder.css("width:100%")
$(".metadata_tags_styler").css({"width":"100%", "display": 'flex', 'flex-direction': 'row'})
$(".metadata_tags_input").css({"width":"40%"})
$(".metadata_tags_type_select").css({"width":"30%"})//tag_select
$("#tag_select").css({"width":"100%", "height":"34px", "margin-left":"4px"})
$(".tags_buttons_wrapper").css({"margin-left": "4px", "padding-top": "2px"})
$(".tags_handling_buttons").css({"width":"100%","padding-top":"22px", "display": "flex", "flex-direction": "row", "margin-left":"4px"})
this.section_html = tags_holder.html()
const config = { attributes: true, childList: true, subtree: true };
//const added_items_observer = new MutationObserver(this.added_items_mutation_observer);
//added_items_observer.observe(repeating_fields_wrapper.get(0), config)
},
_on_add_tags:function(e){
e.preventDefault()
//let search_parent = e.target.parentElement.parentElement.parentElement.parentElement
let search_parent = e.target.closest(".metadata_tags_styler")
let new_index = Array.from(search_parent.parentNode.children).indexOf(search_parent) +1
let new_index_text = `index-${new_index}`
this.section_html = this.section_html.replace(/index-[0-9]/g, new_index_text)
this.el.append(this.section_html)
},
_on_remove_tags:function(e){
e.preventDefault()
let removed_tag_row = e.target.closest(".metadata_tags_styler")
//let removed_tag_row = e.target.parentElement.parentElement.parentElement.parentElement
removed_tag_row.remove()
},
}
})
and finally this is a Runtime error screenshot i raised for you - dear - to see the tags data is there:
thank you!

Django check array inside array and change template

i have array line this
setime = ["00:00", "00:30", "01:00", "01:30", "02:00", "02:30", "03:00", "03:30", "04:00", "04:30", "05:00", "05:30", "06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"]
and i want check
in view
myListTime= checkDateTime.objects.all().filter(Teacher_id = 1)
i tried in template
{% for i in setime %}
<ul>
{% for j in myListTime %}
{% if j.cuTime in i %}
<li class="active">{{ i }}</li>
{% else %}
<li>{{ i }}</li>
{% endif %}
{% endfor %}
</ul>
{% endfor %}
i need result like this if data matched, li have active class
enter image description here
in db
Rather than iterating over the list of times, you'd be better to use that list in your database query.
If you've got a list you can do __in to check if a list of values exists in the values for a field.
setime = ["00:00", "00:30", ..., "22:30", "23:00", "23:30"]
myListTime_with_time = checkDateTime.objects.all().filter(Teacher_id=1, cuTime__in=setime)
myListTime_without_time = checkDateTime.objects.all().filter(Teacher_id=1).exclude(cuTime__in=setime)

Pass on multiple arrays in October CMS

I have a list in October CMS like this:
<ul>
<li {% if this.page.id=='some-id' %} class = "active" {% endif %}>
Item 1
</li>
<li {% if this.page.id=='some-id' %} class = "active" {% endif %}>
Item 2
</li>
<li {% if this.page.id=='some-id' %} class = "active" {% endif %}>
Item 3
</li>
</ul>
However, as you can see there is a lot of repitition so I decided to create array variables. I can pass on a single array variable but I am not sure how to do it for multiple arrays so my code can look something like this:
==
function onStart(){
$this['pageData']=[
'data' => [
'item' => ['Item 1','Item 2','Item 3'],
'id' => ['pageid1','pageid2','pageid3'],
'link' => ['dir/page1','dir/page2','dir/page3']
]
];
}
==
<ul>
{% for items in pageData %}
<li {% if this.page.id == items.data.id %} class="active" {% endif %}>
{{items.data.item}}
</li>
{% endfor %}
</ul>
I know this code is wrong but this is the idea. I can retrieve one object array if I write:
{% for items in pageData.data.item %}
<li>{{items}}</li>
{% endfor %}
But this of course only gives me a list of items inside the 'item' object. I hope I explained it well. Please let me know if I can provide more information to get this problem solved.
You can write it like this
==
function onStart(){
$this['records'] = [
[
'id' => 'pageid1',
'item' => 'Item 1',
'link' => 'dir/page1'
],
[
'id' => 'pageid2',
'item' => 'Item 2',
'link' => 'dir/page2'
],
[
'id' => 'pageid3',
'item' => 'Item 3',
'link' => 'dir/page3'
],
];
}
====
<ul>
{% for record in records %}
<li {% if this.page.id == record.id %} class="active" {% endif %}>
{{record.item}}
</li>
{% endfor %}
</ul>
this will work
if any doubts please comment.

AngularJS ng-click not invoked where dom inside repeat

When the ng-repeat area in my code example is executed the ng-click actions are not working. Although if moved outside the ng-repeat it would work. Which am not sure how to solve or what is causing this to happen,
my HTML
<table class="table table-bordered table-hover" id="my-vehicles-table" ng-controller="VehicleController">
<tbody>
<tr ng-repeat="car in cars">
<td>{% ng car._get_model_display.make_display %} {% ng car._get_model_display.model_display %} {% ng car._get_model_display.trim_display %}</td>
<td>{% ng car.created_since %}</td>
<td>{% ng car.view_count %}</td>
<td>
{% trans 'Delete' %}
{% trans 'Edit' %}
</td>
</tr>
</tbody>
</table>
where by {% ng xxx %} will output {{ xx }} this is the django template tag for it. The content is rendered normally, even inside the anchor for delete, I can see delete($event, num) so its populating the values correctly.
But when I click the delete anchor its not invoking the function delete from my following controller
'use strict';
function VehicleController($scope, car) {
car.query(
// params
{created_by: '1'},
// success
function(data) {
$scope.cars = data.objects;
},
// error
function(data) {
}
);
var init = function() {
};
$scope.delete = function($event) {
console.log('dude');
// car.delete({id: id});
}
// initialize values
init();
}
delete($event, {% ng car.id %}) should probably just be delete($event, car.id)
I'm presuming {% ng %} is custom {{ }}? I've not seen that before. Either way, you don't need the {{ or {% ng inside of the ng-click="", as that's $eval'ed.

Resources