I'm trying to use tinyMCE in my angualar app. I'm using the directive provided by angular-ui-tinymce module. I have a state in wich i put the textarea and i want to buitd some templates that the user can choice. Moreover, I want to make dynamic these template. Here is my controller :
(function(){
'use strict';
angular
.module('app.core')
.controller('refertazioneController', refertazioneController);
function refertazioneController($stateParams){
var vm = this;
vm.prova="refertazioneController";
vm.tinymceModel = '';
vm.sospeso=true;
vm.params = $stateParams;
vm.currentUser = sessionStorage;
vm.tinymceOptions = {
inline: false,
slector: 'textarea',
height: 500,
plugins : 'advlist autolink link image lists charmap print preview template save',
skin: 'lightgray',
theme : 'modern',
language:'it',
statusbar: false,
templates:[ {title: 'Titolo1', description: 'Descrizione1', url: 'sections/refertazione/referto1.html'},
{title: 'Titolo2', description: 'Secondo referto', url: 'sections/refertazione/referto1.html'}
]
};
}
})();
and this is the template:
<p style="text-align: center;">
<strong>A.S.L. 02 LANCIANO-VASTO-CHIETI</strong>
</p>
<p style="text-align: center;">
<strong>Ospedale Clinicizzato "SS.Annunziata"</strong>
</p>
<p style="text-align: center;">
<strong>Servizio Radiologia</strong>
</p>
<p style="text-align: center;">
<strong>Sezione di Scienze Radiologiche dell Università </strong>
</p>
<p style="text-align: center;">Direttore: Prof. Antonio Raffaele Cotroneo</p>
the problem is that I can not use my controller in the template. I tryed to handle the template like a state in ui router but the same. Can someone suggest me an approach?
Why wouldn't this work?
<div ng-controller="refertazioneController as referCtrl">
<p style="text-align: center;">
<strong>A.S.L. 02 LANCIANO-VASTO-CHIETI</strong>
</p>
<p style="text-align: center;">
<strong>Ospedale Clinicizzato "SS.Annunziata"</strong>
</p>
<p style="text-align: center;">
<strong>Servizio Radiologia</strong>
</p>
<p style="text-align: center;">
<strong>Sezione di Scienze Radiologiche dell Università </strong>
</p>
<p style="text-align: center;">Direttore: Prof. Antonio Raffaele Cotroneo</p>
</div>
Related
I want to update my view(an input form) to add products to database. For a single product I am able to add it by making it into an array, but now I want to add multiple products and with the click of a button "Add more Product", a similar view(form) is to be generated below the existing form, and this can go on multiple times(to be determined at run time). Now I have two problems:
1. How to update my view with every (Add more Product)button click. Is it done by maintaining some count?
2. How to add multiple product values from each of the forms into the the array of object.
$scope.onClick = function () {
$scope.productData =
{
name: $scope.name,
description: $scope.description,
price: $scope.price,
image: $scope.image,
tags: $scope.tags,
partner_id: $scope.partner_id,
};
}
Example Code
There are a ton of ways to do this. I made this sample plunker that shows a simple option of toggling a form div, adding data in the form, then pushing the resulting form object to the primary products array.
EDIT: I refactored my plunk and snippet to use a Javascript class and constructor. Cloning a master object as shown below is another way to perform this task.
https://embed.plnkr.co/IsNifSaF8jE7oOog29dK/
(See the full snippet at the bottom of this answer.)
Explanation
In your code, you are using $scope on all of your object properties. What you should actually do is create one top-level scope array that is the result of your products retrieval from the server. I would actually create a JavaScript constructor / class that matches the product object you need in the database (for brevity, I just created a "master" object and a cloned "newProduct" object to make edits to):
// Sample Product Object
$scope.newProduct= {
name: "",
description: "",
price: 0.00,
image: "",
tags: [],
partner_id: 0
};
You can bind your $scope.newProduct object to the form with ng-model.
<!-- ==== Simplified Form ==== -->
<form class="form" ng-submit="submitNewProduct()">
<div class="form-group">
<label>Product Name: </label>
<input class="form-control" type="text" ng-model="newProduct.name" >
</div>
<input type="submit" class="btn btn-info" />
</form>
Now when you submit the new product data, you can manipulate it however you need to in the controller (via the $scope.submitNewProduct() function). Once the object is successfully inserted into your database and you're done manipulating the data, you can push the finalized "new product" object into the products array. AngularJs will update the view for you (bound objects via ng-model are being watched for changes) once you add the new product to the array:
// If server update is successful, add new product to products array
$scope.products.push($scope.newProduct);
If you aren't using a constructor, just make sure to note that I reset the $scope.newProduct object back to default values so it doesn't carry over any new changes when you open the new product form again.
// Reset placeholder product
$scope.newProduct = $scope.masterProduct;
Helpful Resources
Tutorial Vids: https://youtu.be/MzqkIZLkBsU
Javascript Constructors: https://www.w3schools.com/js/js_object_constructors.asp
ngRepeat Examples: https://www.w3schools.com/angular/ng_ng-repeat.asp
Snippet
(function() {
"use strict";
var app = angular.module("myApp", []);
app.controller("myController", myController);
myController.$inject = ["$scope", "$timeout", "$filter"];
function myController($scope, $timeout, $filter) {
$scope.loading = false;
class Product {
constructor(_name, _description, _price) {
this.id = this.getNewId();
this.name = _name;
this.description = _description;
this.price = _price;
this.image = "https://www.thesweetexplosion.co.uk/wp-content/uploads/2013/06/product-placeholder.jpg";
this.tags = [];
this.partner_id = 0;
}
getNewId() {
var latestId = $scope.products[$scope.products.length - 1].id
return latestId + 1;
}
}
// Pretending we received these products received from the database...
$scope.products = [{
id: 0,
name: "product_1",
description: "product_1 description",
price: 52.23,
image: "https://raspberrypi.dk/wp-content/uploads/2014/07/raspberry-pi-model-b-plus1.png",
tags: [],
partner_id: 345214967
}, {
id: 1,
name: "product_2",
description: "product_2 description",
price: 46.23,
image: "https://modtronix.com.au/wp-content/uploads/enc-rpi3-official_bottom_ll-100x100.jpg",
tags: [],
partner_id: 514852924
}];
// Add new Products by using this base object
$scope.placeholderProduct = {
id: 0,
name: "",
description: "",
price: 0.00,
image: "https://www.thesweetexplosion.co.uk/wp-content/uploads/2013/06/product-placeholder.jpg",
tags: [],
partner_id: 0
};
$scope.createNewProduct = function(){
$scope.newProduct = new Product("", "", 0);
}
$scope.submitNewProduct = function() {
// DO SERVER UPDATING HERE
// Show loading
$scope.updating = true;
// Simulate server update
$timeout(function() {
// If server update is successful, add new product to products array
$scope.products.push($scope.newProduct);
// Reset submit button
$scope.updating = false;
// Reset placeholder product
$scope.newProduct = {};
// Hide products form
$scope.addProductForm = false;
}, 1000);
}
}
})();
.productImg {
width: 50px;
height: 50px;
}
.prodForm {
margin-top: 15px;
margin-bottom: 15px;
;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="jumbotron text-center">
<h3>AngularJS (1.3.1) - Instantiating Products with ES6 Class Constructor</h3>
</div>
</div>
</div>
<!-- New Product Form - Toggled with addProductForm -->
<div class="col-xs-12">
<button type="button" class="btn btn-sm btn-success" ng-click="createNewProduct(); addProductForm = !addProductForm" ng-show="!addProductForm">
<span class="glyphicon-plus"> Add New Product</span>
</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="addProductForm = !addProductForm" ng-show="addProductForm">
<span>Clear</span>
</button>
</div>
<div class="col-xs-12 well prodForm" ng-show="addProductForm">
<form class="form" ng-submit="submitNewProduct()">
<div class="form-group">
<label>Product Name: </label>
<input class="form-control" type="text" ng-model="newProduct.name" >
</div>
<div class="form-group">
<label>Description: </label>
<input class="form-control" type="text" ng-model="newProduct.description" />
</div>
<div class="form-group">
<label>Price: </label>
<input class="form-control" type="number" min="0.01" step="0.01" ng-model="newProduct.price" format="currency" />
</div>
<div class="form-group">
<label>Partner Id: </label>
<input class="form-control" type="number" ng-model="newProduct.partner_id" />
</div>
<input type="submit" class="btn btn-info" ng-show="!updating" />
<button type="button" class="btn btn-info" ng-show="updating"><i class="fa fa-spinner fa-spin"></i> Updating...</button>
</form>
</div>
<!-- Primary Products Table -->
<div class="col-xs-12">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Image</th>
<th>Tags</th>
<th>Partner Id</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products track by $index">
<td>{{ product.name }}</td>
<td>{{ product.description }}</td>
<td>{{ product.price | currency }}</td>
<td>
<img class="productImg" ng-src="{{ product.image }}" alt="{{ product.name }} img" />
</td>
<td>{{ product.tags }}</td>
<td>{{ product.partner_id }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
i'm working on an angular web app and i'm stuck in a part of it.i'm trying to update an angular model by choosing an item in a bootstrap carousel.i mean that if i select an image from the bootstrap carousel, the image's link will be put in the form used to update the model.is it possible to do it?this is the code i'm trying to make working
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="Interaction_Ctrl">
<form>
<table>
<tr>
<td>Image URL:</td>
<td>
<input type="url" placeholder="http://reelyactive.com/images/barnowl.jpg" ng-model="person.image" ng-change='change()' class="form-control" />
</td>
</tr>
<tr>
<td>
<carousel>
<slide ng-repeat="slide in slides" active="slide.active" ng-model="person.image" ng-change='change()'>
<img ng-src="{{slide.image}}" style="height:100px; margin:auto">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</slide >
</carousel>
</td>
</tr>
</table>
</form>
</div>
var mymodule = angular.module("jsonerator", ['ui.bootstrap']);
mymodule.controller("Interaction_Ctrl", function ($scope) {
$scope.slides = [];
$scope.slides.push({
text: 'barnowl',
image: 'http://reelyactive.com/images/barnowl.jpg'
});
$scope.slides.push({
text: 'barnacles',
image: 'http://reelyactive.com/images/barnacles.jpg'
});
$scope.slides.push({
text: 'barterer',
image: 'http://reelyactive.com/images/barterer.jpg'
});
$scope.slides.push({
text: 'chickadee',
image: 'http://reelyactive.com/images/chickadee.jpg'
});
$scope.slides.push({
text: 'starling',
image: 'http://reelyactive.com/images/starling.jpg'
});
function changeKeyValue() {
for(var key in $scope.person) {
if($scope.person.hasOwnProperty(key)) {
if(!$scope.person[key].length) {
delete $scope.person_ld["#graph"][0]["schema:" + key];
}
else {
$scope.person_ld["#graph"][0]["schema:" + key] = $scope.person[key];
}
}
}
}
$scope.change = function() {
changeKeyValue();
}
});
});
If you place the input url element somewhere within the ng-repeat, the input will update as the slides change. Right now the issue is the scope {{slide.image}} is within each <scope> element, so the input does cannot utilize the model attribute.
<carousel>
<slide ng-repeat="slide in slides" active="slide.active" ng-model="person.image">
<input type="url" placeholder="http://reelyactive.com/images/barnowl.jpg" ng-model="person.image" class="form-control" />
<br>
<br>
<img ng-src="{{slide.image}}" style="height:100px; margin:auto">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</slide >
</carousel>
You can adjust CSS or add additional <br/> to separate as needed. Plunker below. Let me know if that helps.
http://plnkr.co/edit/Kd23U1ercuqc2ACpQEZH?p=preview
Hi I'm a bit new to angular and trying to figure out how I could access a json key and iterate and print the values that are contained in an array. In my case below I'm trying to print the names along with their roles.
angular.module('employeeEarnestApp')
.controller('MainCtrl', function ($scope) {
$scope.employees = [ { id: 1, name: 'Alex', roles: ['admin','user','CEO'] },
{ id: 2, name: 'John', roles: ['developer','marketing'] },
{ id: 3, name: 'Kim', roles: ['sales','developer','CTO'] } ];
});
How could I use ng-repeat to print out the roles in the array? I'd imagine it might be something like this below?
<div class="container">
<h2>My Employees</h2>
<p class="form-group" ng-repeat="employee in employees">
{{employee.id}} - {{employee.name}}
<p class="form-group" ng-repeat="roles in {{employees.roles}}">
{{roles}}
</p>
</p>
</div>
Remove {{}} in ng-repeat, since ng-repeat automatically evaluates the expression, no need for {{}}.
<div class="container">
<h2>My Employees</h2>
<p class="form-group" ng-repeat="employee in employees">
{{employee.id}} - {{employee.name}}
<p class="form-group" ng-repeat="role in employee.roles">
{{role}}
</p>
</p>
</div>
See, http://jsbin.com/hasuyewazi/1/edit
I am new to angularjs. I am trying to display the content from controller to the HTML but I am getting the data in console and I am not able to show it on the browser.
My html code:
<ion-list >
<ion-item ng-repeat="item in taskdetails" item="item" class="item-remove-animate item " class="itembg" on-swipe-right="showcard(item._id)" on-hold=" data.showReorder = !data.showReorder">
<span class="toptask" ng-hide="task.hide">
<span style="opacity:0.8"> {{ item.title| limitTo:10 }}<span ng-show="item.title.length> 10"><b> ...</b></span></span>
<small class="time " style="float:right;"> <i class="button button-icon icon ion-play balanced" ng-class="{ 'ion-pause assertive': !data.paused, 'ion-play balanced': data.paused}" ng-click="play5(item.id)" ></i>
</small>
<div style="float:right;margin-right:5px; font-size: 32px;
position: absolute;
right: 10px;
top: 10px;
color: black;" class="time icon ">
<i ng-class="{ 'ion-gear-b': data.paused, 'ion-loading-c spin': !data.paused}" class=" icon balanced" ng-click="showcard(item.id)"></i>
</div>
</span>
</ion-item>
</ion-list>
Controller
$scope.openTasks = function (impFlag, urgFlag) {
console.log("important came as: " + impFlag + " , urgent falg came as: " + urgFlag);
quadrantservice.gettask.get({
important: impFlag,
urgent: urgFlag
}).$promise.then(function (result) {
$scope.taskdetails = result;
console.log('task detailssssssssssssss' + JSON.stringify($scope.taskdetails));
/*$state.go('listoftask', {
important: impFlag,
urgent: urgFlag
});*/
});
$state.go('/listostasks');
}
I am getting the data in console but I am not able to display it on 'listoftasks' state.
You need $watch on your data change because intially data is not available so you need to watch the changes and reflect it accordingly.
$scope.$watch('taskdetails',function(newVal){
if(typeof newVal !='undefined'){
$scope.taskdetails=newVal;
}
});
//Place this in your maincontroller.
I'm using the angular ui bootstrap carousel and I want to make the indicators thumbnails. I have a controller that looks like this (from the demo):
function carouselCtrl($scope) {
$scope.myInterval = 5000;
$scope.imgPath="img/slideshow/"
var slides = $scope.slides = [{
'imgName':'iguanas.jpg',
'caption':'Marine iguanas in the Galapagos National Park on Santa Cruz Island, on September 15, 2008.',
'author':'(Reuters/Guillermo Granja)'
},{
'imgName':'eruption.jpg',
'caption':'In June of 2009, the Cerro Azul volcano on Isabela Island was in an active phase, spewing molten lava into the air, spilling it across its flanks, and widening existing lava flows.',
'author':'(Reuters/Parque Nacional Galapagos)'
},{
'imgName':'bluefoot.jpg',
'caption':'A close-up of a pair of Booby feet, photographed in March of 2008. ',
'author':'(CC BY Michael McCullough)'
}];
}
and the template looks like this:
<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel">
<ul class="carousel-indicators" ng-show="slides().length > 1">
<li ng-repeat="slide in slides()" class="slide-thumb" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li>
</ul>
<div class="carousel-inner" ng-transclude></div>
<a ng-click="prev()" class="carousel-control left" ng-show="slides().length > 1">‹</a>
<a ng-click="next()" class="carousel-control right" ng-show="slides().length > 1">›</a>
</div>
I want to do something like this:
<li ng-repeat="slide in slides()" class="slide-thumb" ng-class="{active: isActive(slide)}" ng-click="select(slide)" style="background-image:url({{slide.imgName}});"></li>
but I must be out of scope or something... Does anyone know any angular carousels that have a thumbnail option or how I can get this to work?
The slide array in the carousel template actually don't refer to the slides array you have defined in your app controller.
In the carousel template slides refer to a bunch of dom elements enhanced with internal properties. That's why any access to properties you have defined in our objects will failed when executed (scope issue as you guessed already).
If you want to stick to the carousel from angular-ui I would recommend a slightly different approach and go for css styling something like that:
//Default styles for indicator elements
.carousel-indicators li {
background-size : 42px 22px;
width : 42px;
height: 22px;
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
}
// Then Specify a background image for every slide
.carousel-indicators li:nth-child(1){
background-image: url(http://cache.wallpaperdownloader.com/bing/img/WeddedRocks_20100418.jpg);
}
...
You can see a working Plunker here.
It's very possible and it's very simple. First you must pass the model of every slide in the actual directive as indicated in the docs for the uib-slide settings. And then you must override the template using the template-url directive. Don't forget to declare the template.
So the html should look like this:
<!--Defining the controller scope-->
<div ng-controller="carousel">
<!--Declaring the template for later usage-->
<script id="carousel-with-thumbs.html" type="text/ng-template">
<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()"
ng-swipe-left="next()">
<div class="carousel-inner" ng-transclude></div>
<a role="button" href class="left carousel-control" ng-click="prev()"
ng-class="{ disabled: isPrevDisabled() }"
ng-show="slides.length > 1">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">previous</span>
</a>
<a role="button" href class="right carousel-control" ng-click="next()"
ng-class="{ disabled: isNextDisabled() }"
ng-show="slides.length > 1">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">next</span>
</a>
<ol class="carousel-indicators" ng-show="slides.length > 1">
<li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index"
ng-class="{ active: isActive(slide) }" ng-click="select(slide)">
<!--Showing the thumbnail in a <img> tag -->
<img ng-src="{{slide.slide.actual.thumb}}">
<span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
</li>
</ol>
</div>
</div>
</script>
<uib-carousel active="active" interval="interval" template-url="carousel-with-thumbs.html">
<uib-slide ng-repeat="slide in slides track by $index" index="$index" actual="slide">
<!--Passing the slide in the actual directive-->
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>{{slide.title}}</h4>
<p>{{slide.text}}</p>
</div>
</uib-slide>
</uib-carousel>
Take a moment to analyse the carousel-indicators ordered list:
<ol class="carousel-indicators" ng-show="slides.length > 1">
<li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }"
ng-click="select(slide)">
<img ng-src="{{slide.slide.actual.thumb}}">
<span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
</li>
</ol>
Look how each slide model has another slide sub-model which is the transcluded scope of the slide model passed
through the actual directive. And then, nested again, the actual model containing all the data of each slide:
<img ng-src="{{slide.slide.actual.thumb}}">
And of course for the big finale, the controller should look like this:
(function(){
'use strict';
angular
.module('app', ['ui.bootstrap'])
.controller('carousel', carousel);
carousel.$inject = ['$scope'];
function carousel($scope){
$scope.active = 0;
$scope.interval = 5000;
$scope.slides = [
{title: "Any title", text: "This is a text for the slide", image: "path/to/the/image/image.jpg", thumb: "path/to/the/image/thumbs/thumb.jpg"},
{title: "Any title", text: "This is a text for the slide", image: "path/to/the/image/image.jpg", thumb: "path/to/the/image/thumbs/thumb.jpg"},
{title: "Any title", text: "This is a text for the slide", image: "path/to/the/image/image.jpg", thumb: "path/to/the/image/thumbs/thumb.jpg"}
];
}
})();
By the way, I'm using Angular UI Boostrap 1.3.3 along with Angular 1.5.8.
Here's the Fiddle for it https://jsfiddle.net/logus/6mvjpf40/