I have an angular application that uses bootstrap collapse element.
I've created a directive called accordion-list that host the collapsible elements.
Then, to listen to the events, i've used jquery event delegation.
For some reason, my application can't detect when the bootstrap fires the hidden.bs.collapse event.
Here is my code:
//app.js
'use strict';
(function () {
var provasNaoIdentificadas = angular.module("provasNaoIdentificadas", [
'restClient'
]);
provasNaoIdentificadas.controller("accordionCtrl", ["$scope", "ListaInscricao", function($scope, ListaInscricao){
$scope.inscricao = {
"Secretaria": ""
};
$("accordion-list").on("hidden.bs.collapse shown.bs.collapse", ".collapse", function (event) {
if ($(this).hasClass("in")) {
$(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-minus");
$(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("fechar");
} else {
$(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-plus");
$(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("expandir");
}
console.log(1, this, event); // i have detected the problem by interpreting
});
ListaInscricao.get({"id": 1}, function(data){
if (data.Sucesso) {
$scope.inscricao = data.Dados;
} else {
// toastr
}
});
}]);
provasNaoIdentificadas.directive('accordionList', function() {
return {
"restrict": "E",
"templateUrl": "partials/accordion.html"
};
});
})();
Help you guys can help me. Thanks in advance. :)
EDIT
Here's my files:
index.html:
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="provasNaoIdentificadas">
<head>
<title>Hábile: Inscrição De Escolas Públicas Para Provas Não Identificadas</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="css/vendor/bootstrap.min.css" />
<script src="js/vendor/jquery-1.11.1.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/angular.min.js"></script>
<script src="js/vendor/angular-resource.min.js"></script>
<script src="js/app.js"></script>
<script src="js/rest-client.js"></script>
<style>
.panel-heading {
cursor: pointer;
}
.panel-heading .panel-title span.pull-right.text-muted {
font-size: 10px;
}
.panel-heading .panel-title span.pull-right.text-muted.expandir:before {
content: "clique para expandir";
}
.panel-heading .panel-title span.pull-right.text-muted.fechar:before {
content: "clique para fechar";
}
</style>
</head>
<body>
<div class="container">
<div class="well text-justify">
<h3>Formulário de Inscrição Hábile 2014</h3>
</div>
<div ng-controller="accordionCtrl">
<h2 id="nomeSecretaria">{{ inscricao.Secretaria }}</h2>
<accordion-list></accordion-list>
</div>
<div class="text-center">
<button type="button" class="btn btn-lg btn-primary">Salvar Inscrição</button>
<button type="button" class="btn btn-lg btn-warning">Finalizar Inscrição</button>
</div>
</div>
</body>
</html>
partials/accordion.html
<!-- partials/accordion.html -->
<div class="panel-group" id="accordion_escolas">
<div class="panel panel-default" ng-repeat="escola in inscricao.Escolas">
<div class="panel-heading" data-toggle="collapse" data-target="#escola{{ $index }}" data-parent="#accordion_escolas">
<div class="panel-title">
<span class="glyphicon glyphicon-plus"></span>
{{ escola.Nome }} <span class="text-muted">x alunos inscritos</span>
<span class="pull-right text-muted expandir"></span>
</div>
</div>
<div id="escola{{ $index }}" class="panel-collapse collapse">
<div class="panel-body">
<p>
<label for="qtdProfessoresEscola{{ $index }}">Qtd. Professores</label><br />
<input class="form-control" type="text" id="qtdProfessoresEscola{{ $index }}}}" value="{{ escola.QtdProfessores }}" />
</p>
<div class="panel-group" id="accordion_escola{{ $index }}">
<div class="panel panel-default" ng-repeat="serie in escola.Series">
<div class="panel-heading" data-toggle="collapse" data-target="#turma_{{ $index }}_escola{{ $parent.$index }}" data-parent="#accordion_escola{{ $parent.$index }}">
<div class="panel-title">
<span class="glyphicon glyphicon-plus"></span>
{{ serie.Nome }} <span class="text-muted">y alunos inscritos</span>
<span class="pull-right text-muted expandir"></span>
</div>
</div>
<div id="turma_{{ $index }}_escola{{ $parent.$index }}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table table-hover table-condensed table-bordered">
<thead>
<tr>
<th>Turma</th>
<th>Qtd Alunos</th>
<th>Qtd Testes A3</th>
<th>Alunos PCD</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="turma in serie.Turmas">
<td>{{ turma.Nome }}</td>
<td><input class="form-control" type="text" value="{{ turma.QtdAlunos }}" /></td>
<td><input class="form-control" type="text" value="{{ turma.QtdTestesA3 }}" /></td>
<td><input class="form-control" type="text" value="{{ turma.AlunosPCD }}" /></td>
<td><button class="btn btn-primary btn-sm" type="button">Excluir Turma</button></td>
</tr>
</tbody>
</table>
<p>
<button class="btn btn-primary" type="button">Adicionar Turma</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
js/app.js:
/* js/app.js */
'use strict';
(function () {
var provasNaoIdentificadas = angular.module("provasNaoIdentificadas", [
'restClient'
]);
provasNaoIdentificadas.controller("accordionCtrl", ["$scope", "ListaInscricao", function($scope, ListaInscricao){
$scope.inscricao = {
"Secretaria": ""
};
$("accordion-list").on("hidden.bs.collapse shown.bs.collapse", ".collapse", function (event) {
if ($(this).hasClass("in")) {
$(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-minus");
$(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("fechar");
} else {
$(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-plus");
$(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("expandir");
}
console.log(1, this, event);
});
ListaInscricao.get({"id": 1}, function(data){
if (data.Sucesso) {
$scope.inscricao = data.Dados;
} else {
// toastr
}
});
}]);
provasNaoIdentificadas.directive('accordionList', function() {
return {
"restrict": "E",
"templateUrl": "partials/accordion.html"
};
});
})();
js/rest-client.js:
/* js/rest-client.js */
'use strict';
(function(){
var restClient = angular.module('restClient', ['ngResource']);
restClient.factory('ListaInscricao', ['$resource', function ($resource) {
return $resource('mock/lista_inscricao.json');
}]);
})();
mock/lista_inscricao.json:
{
"Sucesso": true
,
"Mensagem": ""
,
"Dados": {
"Secretaria": "Secretaria de Educação ABC"
,
"Escolas": [
{
"Nome": "Escola 1"
,
"QtdProfessores": 12
,
"Series": [
{
"Nome": "1º Ano Ensino Médio"
,
"Turmas": [
{
"Nome": "A"
,
"QtdAlunos": 30
,
"QtdTestesA3": 0
,
"AlunosPCD": "27,29"
}
, {
"Nome": "B"
,
"QtdAlunos": 28
,
"QtdTestesA3": 2
,
"AlunosPCD": ""
}
]
}
,
{
"Nome": "2º Ano Ensino Médio"
,
"Turmas": [
{
"Nome": "A"
,
"QtdAlunos": 25
,
"QtdTestesA3": 1
,
"AlunosPCD": "7"
}
]
}
]
}
,
{
"Nome": "Escola 2"
,
"QtdProfessores": 10
,
"Series": [
{
"Nome": "3º Ano Ensino Médio"
,
"Turmas": [
{
"Nome": "A"
,
"QtdAlunos": 30
,
"QtdTestesA3": 0
,
"AlunosPCD": "15,27"
}
, {
"Nome": "B"
,
"QtdAlunos": 26
,
"QtdTestesA3": 0
,
"AlunosPCD": ""
}
, {
"Nome": "C"
,
"QtdAlunos": 25
,
"QtdTestesA3": 0
,
"AlunosPCD": ""
}
]
}
]
}
]
}
}
for now, I've just changed my event listener. For some reason, jquery can't hear the hidden.bs.collapse. I've noticed that the click event is not suitable for this case, because if you click fast enough, you can end with a closed accordion and a minus icon on it. So, I've changed the event listener to:
$(document).on("hide.bs.collapse show.bs.collapse", ".collapse", function (event) {
$(this).prev().find(".glyphicon").toggleClass("glyphicon-plus glyphicon-minus");
$(this).prev().find("span.pull-right.text-muted").toggleClass("expandir fechar");
event.stopPropagation();
});
This is working pretty well. But, as bhantol said, it not quite the angularjs way of doing things. The one with a better solution win the prize xD
We don't use jquery code in Controllers.
Controllers are not the right place for DOM manipulation.
Directives are what you need for DOM manipulation.
Also in AngularJS we generally don't use jQuery eventing programming style.
Here is approximate plunker of your orignial code. If I understand correctly you re trying to toggle the state of glyphicon state + and - using the code below:-
$("accordion-list").on("hidden.bs.collapse shown.bs.collapse", ".collapse", function (event) {
if ($(this).hasClass("in")) {
(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-minus");
$(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("fechar");
} else {
$(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-plus");
$(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("expandir");
}
console.log(1, this, event); // i have detected the problem by interpreting
});
Click here for the solution plunker.
The solution is all in accordion.html notice ng-model however I hace commented out your jquery code in the controller.
ng-model="collapseState"
this is to hold the state.
then further notice
<span class="glyphicon"
ng-class="collapseState[$index] ? 'glyphicon-minus' : 'glyphicon-plus'">
</span>
here we choose the class based on the value of collapseState[$index].
Also notice ng-click which basically toggles the value of collapseState[$index]
ng-click="collapseState[$index]= !collapseState[$index]"
So far what we have done is used a model and altered the view by manipulating the model.
This is the gist of AngularJS way.
Related
I am trying to delete an item from my data attribute. A delete is triggered by the delete button on each item. That they triggers the deleteItem(index) function in the child component, which then emits to the parent. But for some reason it never triggers the event handler in the parent.
Help with the drag n drop would be a plus as well. Thank you.
https://jsfiddle.net/4Ld0ubjt/
<html>
<head>
<title>
</title>
<!--- Import Vue.js library --->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="vue.js"></script>
</head>
<body>
<div class="panel-body">
<div id="itemsApp" #delete-item="deleteItem(idx)">
<list-item v-for="(item, index) in items" v-bind:index="index" v-bind:item="item"></list-item>
</div>
</div>
<div class="panel-footer clearfix">
</div>
</div>
</body>
</html>
<!--- END: Main body --->
/**
* Function to run after the Document has completed loading.
*/
$(function () {
/**
* Load and initialize the Module Object
*/
Vue.component('list-item', {
props: ['item', 'index'],
template: `
<div draggable="true" #dragStart="dragstart(index, $event)" #dragFinish="dragfinsih(index, $event)" class="bookmark list-group-item clearfix" :id="index">
<span class="btn glyphicon glyphicon-menu-hamburger pull-left" title="Move Bookmark"></span>
<a :href="item.URL_TE" :id="item.URL_HSH_NR">{{item.URL_NA}} - {{index}}</a>
<div class="btn-group pull-right">
<a class="btn btn-default glyphicon glyphicon-pencil edit" role="button" title="Edit Bookmark" href="##"></a>
<button v-on:click="deleteItem(index)" class="btn btn-danger glyphicon glyphicon-remove delete" title="Delete Bookmark"></button>
</div>
</div>
`,
methods: {
deleteItem(idx) {
console.log("Index? " + idx);
this.$emit('delete-item', idx);
},
/**********START DRAG AND DROP LOGIC********** */
dragstart(which, ev) {
console.log("In dragStart " + JSON.stringify(ev));
ev.dataTransfer.setData('Text', which.index);
ev.dataTransfer.dropEffect = 'move'
this.dragging = which;
},
dragfinish(to, ev) {
this.moveItem(this.dragging, to);
},
moveItem(from, to) {
this.bookmarks.splice(to, 0, this.bookmarks.splice(from, 1)[0]);
}
/**********END DRAG AND DROP LOGIC********** */
},
})
var itemsApp = new Vue({
el: '#itemsApp',
data: {
items: [
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
},
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
}
]
},
methods: {
deleteItem(i) {
console.log("In parent deleteItem " + i);
this.data.splice(i, 1);
}
}
})
});
Event handler should be on child component
<div id="itemsApp">
<list-item v-for="(item, index) in items" v-bind:index="index" v-bind:item="item" #delete-item="deleteItem"></list-item>
</div>
In Vue component, data should be a function
var itemsApp = new Vue({
el: '#itemsApp',
data() {
return {
items: [
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
},
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
}
]
}
},
methods: {
deleteItem(i) {
console.log("In parent deleteItem " + i);
this.items.splice(i, 1);
}
}
})
You can check demo here
I am a little newbie using Vue JS, so i started with Vue 2.
I need to remove an array item but the button that trigger that method is inside a template and the v-for is inside a parent template.
This is my HTML:
MAIN
<div id="main">
<div class="panel-group" id="panelGrp">
<div class="row panelTopSpacing" v-for="panel in panels" is="panel-row" :panel.sync="panel" :general-fields="generalFields" :assistants="assistants" :companies="companies" :positions="positions"></div>
</div>
</div>
CHILD
//CHILD TEMPLATE
<template id="panelsTpl">
<div class="panel panel-success">
<div class="panel-heading">
{{panel.title}}
<a :class="panel.classObj.link" role="button" data-toggle="collapse" data-parent="#panelGrp" :href.sync="'#'+panel.id"></a>
<i :class="panel.infoIcon"></i>
</div>
<div :id.sync="panel.id" :class="panel.classObj.panel">
<div class="panel-body">
<div class="container-fluid" v-if="panel.id === 'genInfo'">
<div class="row">
<div v-for="genField in generalFields" is="general-field" :gen-field.sync="genField"></div>
</div>
</div>
<div class="container-fluid" v-else-if="panel.id === 'assistants'">
<div class="row">
<table class="table table-striped table-responsive table-hover">
<tr>
<th>Internal?</th>
<th>Can read?</th>
<th>Position</th>
<th>Name</th>
<th>Company</th>
<th width="50px"> </th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="checkbox" ></td>
<td></td>
<td><input type="text" class="form-control"></td>
<td></td>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr v-for="(assistnt,index) in assistants" is="assistant-row" :assistant.sync="assistnt"></tr>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
CHILD OF CHILD TEMPLATE
<template id="asstntsTpl">
<tr v-if="! editing">
<td>{{ assistant.internal }}</td>
<td>{{ assistant.allowRead }}</td>
<td>{{ assistant.positionId | position }}</td>
<td>{{ assistant.name }}</td>
<td>{{ assistant.cmpnyId | company }}</td>
<td>
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</td>
</tr>
<tr v-else>
<td><input type="checkbox" v-model="assistant.internal"></td>
<td><input type="checkbox" v-model="assistant.allowRead"></td>
<td><!--<select-position :position="positions" :id.sync="assistant.positionId"></select-position>--></td>
<td><input type="text" v-model="assistant.name" class="form-control"></td>
<td><!--<select-company :company="companies" :id.sync="assistant.cmpnyId"></select-company>--></td>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
</template>
JS:
var main = new Vue({
el: "#main",
data: {
valid: false,
new_assistant: {
id: "",
name: "",
internal: true,
cmpnyId: "",
positionId: "",
allowRead: false
},
panels: [
{id: "genInfo", title: "General Info", classObj: {panel: "panel-collapse collapse in", link: ""}, infoIcon: "fas fa-file-alt infoIcon pull-right"},
{id: "assistants", title: "Assistants", classObj: {panel: "panel-collapse collapse", link: "collapsed"}, infoIcon: "fas fa-users infoIcon pull-right"},
{id: "agrmtns", title: "Agreements", classObj: {panel: "panel-collapse collapse", link: "collapsed"}, infoIcon: "fas fa-file-signature infoIcon pull-right"}
]
assistants: [
{id: "1",
name: "Bob",
internal: true,
cmpnyId: "1",
positionId: "1",
allowRead: false},
{id: "2",
name: "John",
internal: true,
cmpnyId: "1",
positionId: "1",
allowRead: false}
],
companies: [
{id: "1", name: "cmpny1"},
{id: "2", name: "cmpny2"},
{id: "3", name: "cmpny3"}
],
positions: [
{id: "1", name: "Pos1"},
{id: "2", name: "Pos2"},
{id: "3", name: "Pos3"}
]
},
methods: {
addAssistant: function () {
this.assistants.push(this.new_assistant);
this.new_assistant = {
id: "",
name: "",
internal: true,
cmpny_id: "",
position_id: "",
allowRead: false};
}
}
Everthing is working fine at this moment, but when I try to delete a row from the table that is populated with assistants array, it deletes the first row however i clicked the trash icon of second row.
VUE COMPONENT:
Vue.component("assistant-row", {
template: "#asstntsTpl",
props: ["nw-assistant", "assistant"],
data: function () {
return {
editing: false
};
},
methods: {
remove: function (index) {
this.$parent.assistants.splice(**index**, 1);
},
edit: function () {
this.editing = true;
},
update: function () {
this.editing = false;
}
}
});
Seems like splice is not working at all.
PD:::
I know how to use it in a simple scenario, like:
<li v-for="cat,index in categories">
<button #click="remove(index)">Remove</button>
</li>
I made this little jsfiddle simulating something like above code:
https://jsfiddle.net/empiricalDev/eywraw8t/399050/
Thanks in advance.
Regards!
You could try to use this.$emit() to emit an event to the parent component like this.$emit("delete",this.todo); which has event name as first parameter and this.todo as a second one, in the parent component add #delete="removechild" as follow :
<tod v-for="(todo, index) in todos" :todo="todo" #delete="removechild"></tod>
and implement your removechild in the parent component as follow :
removechild(todo){
this.todos.splice(this.todos.indexOf(todo),1);
}
Note :
if your prop is an object like {id:1,name:"todo 1"} you could filter your todos array like this.todos= this.todos.filter((item)=>{return item.id!=todo.id});
Vue.component("tod",{
template:"#tpl",
props:["todo"],
methods: {
remove: function() {
this.$emit("delete",this.todo);
}
}
});
new Vue({
el: '#app',
data: {
todos: ['Buy milk', 'Do exercises', 'Write a book', 'Plant a tree']
},
methods:{
removechild(todo){
this.todos= this.todos.filter((item)=>{return item!=todo});
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vue.delete">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>
<body>
<div id="app">
<ol>
<tod v-for="(todo, index) in todos" :todo="todo" #delete="removechild"></tod>
</ol>
</div>
<template id="tpl">
<li>
{{todo}}
<button #click="remove">×</button>
</li>
</template>
</body>
</html>
i should get output like that in second div i should get inplace of headers i should get income which is mentioned in the controller object data
I just need different content in two div when I changed the data in controller object it should be reflected in div.
here is my html code
<!DOCTYPE html>
<html ng-app="myApp">
<head>
***emphasized text***
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="angular-gridster.min.css"></link>
<link rel="stylesheet" href="wid.css"></link>
</head>
<body ng-controller="myController" >
<div gridster ng-controller="myCtrl" >
<ul>
<li gridster-item="item" ng-repeat="item in Items">
<div my-widget ></div>
</li>
</ul>
</div>
</body>
</html>
my script goes here which contains the controller as well as directive.
var app=angular.module('myApp',['gridster'])
app.controller('myController',function($scope){
$scope.Items = [
{ sizeX: 2, sizeY: 1, row: 0, col: 0, },
{ sizeX: 2, sizeY: 1, row: 0, col: 0, }
]
});
app.controller('myCtrl',function($scope){
$scope.content=[{
data:54565463,
right:67566,
title:'headers'},
{ data:65476756,
right:123,
title:"Income",
}]
});
app.directive('myWidget',function(){
return{
restrict:"EA",
scope:{
title:'#',
data:'=',
},
templateUrl:'spare.html',
}
});
and my spare html is below -
<span ng-controller="myCtrl">
<div class="panel-body " ng-style = "myStyle">
<h1 class="title" >{{content.title}}</h1>
<i class="fa fa-dollar" ></i>{{content.data}}</div>
<p id="rightcorner" ><i class="fa fa-level-up"></i>{{content.right}}
</p>
</span>
what i need is in 2 div's i should get separate data which is giveenter code heren in controller object
Your directive is using an isolated scope (scope:{ title:'#', data:'='}). That's why it doesn't have access to the content array of the parent scope (which is a good thing in general).
What you wanna do is to pass an item of $scope.content to the my-widget directive.
You could use the $index variable of the ngRepeat scope.
<li gridster-item="item" ng-repeat="item in Items">
<div my-widget data="content[$index]"></div>
</li>
As the my-widget directive has its own scope, you have to change the binding expressions (there is no thing called content in the directive scope).
<div class="panel-body">
<h1 class="title" >{{title}}</h1>
<i class="fa fa-dollar" ></i>{{data.data}}
</div>
<p id="rightcorner"><i class="fa fa-level-up"></i>{{data.right}}
</p>
By the way, title is a bad name for an attribute, as it's an html attribute.
EDIT: Added example code for a solution with a single controller, as asked in comments.
angular.module('app', [])
.controller('myController', myController)
.directive('myWidget', myWidget);
function myController() {
var vm = this;
vm.items = [
{
title: "1",
obj: { data: 123 }
},
{
title: "2",
obj: { data: 234 }
}];
}
function myWidget() {
return {
scope: {
data: '<'
},
template: '<div>Widget: {{data.data}}</div>'
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="myController as $ctrl" >
<div>
<ul>
<li ng-repeat="item in $ctrl.items">
<div ng-bind="item.title"></div>
<div my-widget data="item.obj"></div>
</li>
</ul>
</div>
</div>
There are two types of data I'm displaying on single page, one is Insert form and second is where the data is displayed with the help of Angular dataTables, now what I want to do is when I click on Edit I wana display the Data within the Insert form Fields also change the Save button from Save to Update... I've tried it but I'm getting this error although its displaying the data in console.
controller.js:1356 24
controller.js:1363 Colony 02 2
angular-1.4.8.js:12520 TypeError: Cannot set property 'colony_name' of undefined
NOTE: Insert, Delete, Displaying Data is working fine.
Here is my HTML PAGE
<div class="row-fluid" ng-controller="colony_Controller">
<div class="span12">
<div class="span6">
<!-- WIDGET START -->
<div class="widget TwoWidgetsInOneFix">
<!-- Widget Title Start -->
<div class="widget-title">
<h4><i class="icon-reorder"></i>Add Colony</h4>
<span class="tools">
<!-- -->
</span>
</div>
<!-- Widget Title End -->
<!-- Widget Body Start -->
<div class="widget-body">
<form class="form-horizontal">
<div class="control-group">
<div class="small-bg-half">
<label class="control-label">Colony Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="" autofocus required name="colony_name"
ng-model="field.colony_name" > <!-- ng-->
<span class="help-inline" id="help-inline" style="color:red;"></span>
</div>
</div>
</div>
<div class="control-group">
<div class="small-bg-half">
<label class="control-label">Colony Type</label>
<div class="controls">
<select data-toggle="status" class="select select-default mrs mbm input-xlarge" name="colony_type" id="colony_type" ng-model="field.colony_type_id" required> <!-- ng -->
<option value="">--Select Colony Type--</option>
<option ng-repeat="colony in es_colony_type" value="{{colony.es_colony_type_id}}">{{colony.es_colony_type_name}}</option>
</select>
</div>
</div>
</div>
<div class="form-actions">
<button type="button" class="btn btn-success" ng-click="InsertData()"> <!-- ng -->
<i class="icon-plus icon-white"></i> Save</button>
</div>
</form>
</div>
<!-- Widget Body End -->
</div>
<!-- WIDGET END -->
</div>
<div class="span6">
<!-- WIDGET START -->
<div class="widget TwoWidgetsInOneFix">
<!-- Widget Title Start -->
<div class="widget-title"> <!-- ng -->
<h4><i class="icon-reorder"></i>List Of Colony</h4>
<span class="tools">
<!-- -->
</span>
</div>
<!-- Widget Title End -->
<!-- <div id="alert-2" flash-alert active-class="in alert" class="fade">
<strong class="alert-heading">Boo!</strong>
<span class="alert-message">{{flash.message}}</span>
</div> -->
<!-- Widget Body Start -->
<div class="widget-body">
<div ng-controller="colony_Controller as Main_Module">
<table class="table table-striped table-bordered" align="center" datatable="" dt-options="Main_Module.dtOptions" dt-columns="Main_Module.dtColumns" class="row-border hover">
</table>
</div>
</div>
</div>
<!-- Widget Body End -->
</div>
<!-- WIDGET END -->
</div>
Here is my Controller
Main_Module.controller('colony_Controller', function add_house_Controller(flash, $window, $scope, $http, $compile, DTOptionsBuilder, DTColumnBuilder, bootbox, SimpleHttpRequest, DelMainRecPicRecUnlinkPic, message)
{
$http.get('http://localhost:3000/api/SELECT/es_colony_type').success(function(data)
{
$scope.es_colony_type = data.es_colony_type;
});
/********************************** FETCH DATA END *********************************/
/********************************** INSERT DATA START ********************************/
$scope.InsertData = function()
{
var values = $scope.field;
SimpleHttpRequest.Insert('POST','INSERT', 'es_colony', values)
.then(function successCallback(response)
{
if(!response.data.Error)
{
message.successMessageForInsert("<strong>Successfull !</strong> Colony Details Inserted");
setTimeout(function()
{
$window.location.reload();
}, 3500);
// flash.to('alert-1').success = 'Only for alert 1';
}
else
{
message.failedMessageForInsert("<strong>Error !</strong> Data Insertion Failed");
}
},
function errorCallback(response)
{
message.failedMessageForInsert("<strong>Error!</strong> Data Insertion Failed !");
});
};
/********************************** INSERT DATA END **********************************/
/********************************** DISPLAY DATA START *******************************/
var vm = this;
vm.dtOptions = DTOptionsBuilder
.fromFnPromise(function()
{
return $http.get('http://localhost:3000/api/SELECT/es_colony')
.then(function(response)
{
return response.data.es_colony;
});
})
.withOption('order', [0, 'asc'])
.withDisplayLength(5)
.withPaginationType('simple_numbers')
.withOption('createdRow', function(row, data, dataIndex)
{
$compile(angular.element(row).contents())($scope);
})
vm.dtColumns =
[
DTColumnBuilder.newColumn('es_colony_name').withTitle('Colony'),
DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().withOption('width', '31%')
.renderWith(function(data, type, full, meta)
{
return '<button class="btn btn-primary" ng-click="edit_records(' + data.es_colony_id + ')">' +
'<i class="icon-edit"></i> Edit' + '</button> ' +
'<button class="btn btn-danger" ng-click="DeleteRecord(' + data.es_colony_id + ')">' +
'<i class="icon-remove icon-white"></i> Delete' + '</button>';
})
];
/********************************** DISPLAY DATA END *********************************/
/********************************** DELETE DATA START ********************************/
// $scope.hideRow = [];
$scope.DeleteRecord = function(id)
{
bootbox.confirm("Are you sure you want to delete this Record ?", function (confirmation)
{
if(confirmation)
{
DelMainRecPicRecUnlinkPic.DeleteIt('', id, true, 'es_colony', 'es_colony_id')
{
setTimeout(function()
{
$window.location.reload();
}, 3500);
};
}
});
};
$scope.edit_records = function(id)
{
// PassId.id = id;
console.log(id);
SimpleHttpRequest.SelectByID('GET', 'SELECTBYID', 'es_colony', 'es_colony_id', id)
.then(function successCallback(response)
{
var data = response.data.es_colony[0];
console.log(data.es_colony_name, data.es_colony_type_id);
$scope.ufield.ucolony_name = data.es_colony_name;
$scope.ufield.colony_type_id = data.es_colony_type_id;
});
};
/********************************** DELETE DATA END **********************************/
});
In your template, you have an input with ng-model="field.colony_name", but in your controller you never defined $scope.field. You do assign the value var values = $scope.field inside the $scope.InsertData function, but that will just set values to undefined.
Try initializing the variable by adding $scope.field = {} to the beginning of your controller, for starters. That will resolve the error you are getting.
Here is the code that may help you.
Html:
<div ng-app="myApp" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<input type="text" ng-model="choice.name" name="" placeholder="Enter mobile number"> <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</fieldset>
<button class="addfields" ng-click="addNewChoice()">Add fields</button>
<div id="choicesDisplay">
{{ choices }}
</div>
</div>
Js:
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}, {id: 'choice2'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
Also CSS:
fieldset{
background: #FCFCFC;
padding: 16px;
border: 1px solid #D5D5D5;
}
.addfields{
margin: 10px 0;
}
#choicesDisplay {
padding: 10px;
background: rgb(227, 250, 227);
border: 1px solid rgb(171, 239, 171);
color: rgb(9, 56, 9);
}
.remove{
background: #C76868;
color: #FFF;
font-weight: bold;
font-size: 21px;
border: 0;
cursor: pointer;
display: inline-block;
padding: 4px 9px;
vertical-align: top;
line-height: 100%;
}
input[type="text"],
select{
padding:5px;
}
Html
<div ng-app="albumShelf">
<div ng-controller="MainCtrl">
<div style="float:left;">
<select ng-options="b.title for b in albums" ng-model="currentAlbum" ng-change="onChange()">
<option value="">New album...</option>
</select>
</div>
<div style="float:left;">
<form>
<input type="text" ng-model="editing.title">
<br>
<input type="text" ng-model="editing.artist">
<br>
<input type="submit" value="{{ currentAlbum.title ? 'Update' : 'Save' }}" ng-click="addOrSaveAlbum()">
</form>
</div>
</div>
</div>
Js:
var app= angular.module('myApp', [])
.controller('MainCtrl', ['$scope', function($scope/*, albumFactory*/) {
$scope.editing = {};
$scope.albums = [
{ id: 1, title: 'Disorganized Fun', artist: 'Ronald Jenkees' },
{ id: 2, title: 'Secondhand Rapture', artist: 'MS MR' }
];
$scope.addOrSaveAlbum = function() {
if ($scope.currentAlbum) {
$scope.currentAlbum.title = $scope.editing.title;
$scope.currentAlbum.artist = $scope.editing.artist;
}else {
$scope.albums.push({ title: $scope.editing.title, artist: $scope.editing.artist });
}
$scope.editing = {};
};
$scope.onChange = function() {
if ($scope.currentAlbum) {
$scope.editing.title = $scope.currentAlbum.title;
$scope.editing.artist = $scope.currentAlbum.artist;
}else {
$scope.editing = {};
}
};
}])
I'm just getting started with Angular and running up against some roadblocks in my understanding of certain core concepts. To better familiarize myself with this new framework I'm attempting to build a trivial application: "Would You Rather?". I present the user two questions, they pick one, I highlight their choice, and show how many votes each question has from previous users.
It sounds simple but I'm still stuck in a jQuery frame of mind; I want to select the element based on $(this) or $("#id").
I have a factory with an array of question objects. Each object has a firstQuestion and secondQuestion key that maps to a question, as well as a firstVotes and secondVotes key with the corresponding number of votes. I'm using a QuestionsCtrl to control scope and take action when a user makes a choice.
Here's my index.html file:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Would You Rather?</title>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container" ng-app="wouldYouRatherApp">
<div ng-controller="QuestionsCtrl">
<div class="container">
<div class="row text-center">
<h1 class="col-md-12">Would you rather...</h1>
</div>
<div class="row text-center">
<div class="col-md-12">
<h2 class="btn btn-lg btn-{{buttonClass}}" ng-click="recordAnswer('first')">{{question.firstQuestion}}</h2>
<span class="badge" ng-show="badge.show">{{question.firstVotes}}</span>
</div>
</div>
<div class="row text-center">
<h3 class="col-md-12"><small>or</small></h3>
</div>
<div class="row text-center">
<div class="col-md-12">
<h2 class="btn btn-lg btn-{{buttonClass}}" ng-click="recordAnswer('second')">{{question.secondQuestion}}</h2>
<span class="badge" ng-show="badge.show">{{question.secondVotes}}</span>
</div>
</div>
<br>
<div class="row text-center">
<div class="col-md-12">
<h2 class="btn btn-lg btn-primary" ng-show="showNextQuestion" ng-click="nextQuestion()">Next Question <span class="glyphicon glyphicon-forward"></span></h2>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
And here's my main.js file:
var app = angular.module("wouldYouRatherApp", []);
app.factory("Badges", function() {
return {show: false}
})
app.factory("Questions", function() {
var Questions = [{
firstQuestion: "Ride a horse?",
firstVotes: 101,
secondQuestion: "Ride a cowboy?",
secondVotes: 212
},
{
firstQuestion: "Kiss a frog?",
firstVotes: 13,
secondQuestion: "Lick a slug?",
secondVotes: 23
},
{
firstQuestion: "Play Monopoly?",
firstVotes: 12,
secondQuestion: "Play Risk?",
secondVotes: 17
}];
return Questions;
})
app.controller("QuestionsCtrl", function($scope, Badges, Questions) {
$scope.question = Questions.shift();
$scope.buttonClass = 'default';
$scope.showNextQuestion = false;
$scope.badge = Badges;
$scope.recordAnswer = function(choice) {
console.log("User chose: " + choice);
$scope.buttonClass = 'success';
// increment votes badge
$scope[choice+'Votes'] += 1;
Badges.show = true;
$scope.showNextQuestion = true;
}
$scope.nextQuestion = function() {
$scope.question = Questions.shift();
Badges.show = false;
$scope.buttonClass = 'default';
$scope.showNextQuestion = false;
}
})
A live example can be found here: http://jsfiddle.net/t99TL/2/
The app's expected behavior is as follows:
Two questions are presented to the user.
The user clicks on one of the buttons.
That question is highlighted. And the votes badge is incremented. Both votes badges are displayed.
A 'Next Question' button is presented to the user.
When he/she clicks on the 'Next Question' button, a new question is loaded.
I feel like I probably need to create a directive for each individual question... but I'm not sure how to start, or if I'm even on the right path. Any advice on obstacles I'm going to face further down the line is much appreciated (i.e. Updating the votes attribute for the question, etc.).
There are a lot to change to make it work the way you want. This code is not perfect, just a demonstration.
HTML:
<div class="container" ng-app="wouldYouRatherApp">
<div ng-controller="QuestionsCtrl">
<div class="container">
<div class="row text-center">
<h1 class="col-md-12">Would you rather...</h1>
</div>
<div class="row text-center">
<div class="col-md-12">
<h2 class="btn btn-lg btn-{{question.firstQuestion.buttonClass}}" ng-click="recordAnswer(question.firstQuestion)">{{question.firstQuestion.text}}</h2>
<span class="badge" ng-show="badge.show">{{question.firstQuestion.votes}}</span>
</div>
</div>
<div class="row text-center">
<h3 class="col-md-12"><small>or</small></h3>
</div>
<div class="row text-center">
<div class="col-md-12">
<h2 class="btn btn-lg btn-{{question.secondQuestion.buttonClass}}" ng-click="recordAnswer(question.secondQuestion)">{{question.secondQuestion.text}}</h2>
<span class="badge" ng-show="badge.show">{{question.secondQuestion.votes}}</span>
</div>
</div>
<br>
<div class="row text-center">
<div class="col-md-12">
<h2 class="btn btn-lg btn-primary" ng-show="showNextQuestion" ng-click="nextQuestion()">Next Question <span class="glyphicon glyphicon-forward"></span></h2>
</div>
</div>
</div>
</div>
JS:
var app = angular.module("wouldYouRatherApp", []);
app.factory("Badges", function() {
return {show: false}
})
app.factory("Questions", function() {
var Questions = [{
firstQuestion: {
text:"Ride a horse?",
votes: 101,
buttonClass : 'default'
},
secondQuestion: {
text:"Ride a cowboy?",
votes: 212,
buttonClass : 'default'
},
},
{
firstQuestion: {
text:"Kiss a frog?",
votes: 13,
buttonClass : 'default'
},
secondQuestion: {
text:"Lick a slug?",
votes: 23,
buttonClass : 'default'
}
},
{
firstQuestion: {
text:"Play Monopoly?",
votes: 12,
buttonClass : 'default'
},
secondQuestion: {
text:"Play Risk?",
votes: 17,
buttonClass : 'default'
}
}];
return Questions;
})
app.controller("QuestionsCtrl", function($scope, Badges, Questions) {
$scope.question = Questions.shift();
$scope.buttonClass = 'default';
$scope.showNextQuestion = false;
$scope.badge = Badges;
$scope.recordAnswer = function(choice) {
choice.buttonClass = 'success';
choice.votes++;
Badges.show = true;
$scope.showNextQuestion = true;
}
$scope.nextQuestion = function() {
$scope.question.firstQuestion.buttonClass = "default";
$scope.question.secondQuestion.buttonClass = "default";
$scope.question = Questions.shift();
Badges.show = false;
$scope.showNextQuestion = false;
}
})
DEMO