I want to show the data in another page - html

I want to take the id, name image and content of tinymce editor which i want to show on another page using controller. I am using array through which i want to take id, name, image and content but i don't know how to retrive it on another controller.
<div class="col-sm-4">
<div class="form-group">
<label class="settinglabel">Name</label>
<input type="text" maxlength="20" class="form-control" ng-model="data.name">
</div>
</div>
<div class="col-sm-3" style="margin-bottom: 4px;">
<div class="BoardCardWithCustomProperties BoardCardWithCustomProperties--hover" draggable="true">
<div class="BoardCardWithCustomProperties-contents">
<img class="BoardCardCoverImage" ng-src={{data.thumbnail}}>
<div class="BoardCardWithCustomProperties-nameAndDropdownButton">
</div>
</div>
</div>
</div>
<div id="design-9">
<div class="col-sm-12" style="margin-top:10px; margin-bottom:5px">
<textarea rows="20" cols="100" ui-tinymce="tinymceOptions" ng-model="tinymceModel" />
<input name="image" type="file" id="upload" class="hidden" onchange="">
</div>
</div>
myApp.controller('SampleFormatCntrl', ['$scope', '$http', 'orderProcessService', '$timeout', 'authService', '$routeParams', 'localStorageService', '$q', 'CommonhttpService', function ($scope, $http, orderProcessService, $timeout, authService, $routeParams, localStorageService, $q, CommonhttpService) {
var id = $routeParams.id;
$scope.data = localStorageService.get("formatdata");
$scope.action = $routeParams.action;
if ($scope.action == 'Edit' || $scope.action == 'Copy') {
$scope.action = "Update"
}
else {
$scope.action = "Save"
}
$scope.tinyArray = [];
$scope.screenshot = function () {
$scope.tinyArray.push($routeScope.tinyArray);
}

<div ng-repeat="elem in data">
<button id="{{elem.id}}" ng-click="showItem($index, elem)">
{{elem.name}}
</button>
</div>
Controller:
$scope.showItem = function(elementIndex, dataItem){
console.log(elementIndex); // 0
console.log(dataItem.id + ':' + dataItem.name); // 1:Abhishek
}

Related

How to send a picture and name to the database?

Stack vue.js + laravel5.7 I need to load the image and name into the database using axios tools in the component. There is a problem in the code, I can’t understand what is wrong.
Separately, the name downloaded and displayed, it was useful to screw the picture, everything broke. The server on php7.1
Here is my template
<form v-on:submit.prevent="submitCategory()" class="col s12 l12">
<div class="col s12 l3">
<div class="input-field ">
<input id="name" type="text" v-model="posts.name">
<label for="name">Название</label>
<div class="file-field input-field">
<div class="btn">
<span>Загрузить изображение</span>
<input type="file" v-on:change="onFileChange">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</div>
<div>
<button class="waves-effect waves-light btn">
Сохранить изменения
</button>
</div>
</div>
<div class="col s12 l3 center">
<div v-if="!posts.image">
<img src="/images/No_image.png" style="height: 200px"/>
</div>
<div v-else>
<img :src="posts.image" style="height: 200px"/>
<button #click="removeImage" class="btn">Удалить изо</button>
</div>
</div>
</form>
And this is my script
<script>
import axios from 'axios';
export default {
data: function() {
return {
posts: {
name:'',
image:'',
},
errors: []
}
},
methods:{
submitCategory() {
axios.post(`/categories`, this.posts)
.then(response => {
console.log(response)
//this.$router.push({path:'/'})
this.posts = response.data
})
.catch(e => {
this.errors.push(e)
})
},
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
console.log(files);
if (!files.length)
return;
this.createImage(files[0]);
},
createImage(file) {
var image = new Image();
var reader = new FileReader();
// var vm = this;
reader.onload = (e) => {
this.posts.image = e.target.result;
};
reader.readAsDataURL(file);
},
removeImage: function (e) {
this.posts.image = '';
e.posts.target.reset();
}
}
}
</script>
It is expected that the name and the picture will be written into the jamb with categories by the columns name and image, but nothing happens.

Populating Dropdown list in html from Database using ViewBag

I am able to get values into ViewBag and then I am passing those values into the HTML page. The Problem I am facing is that once i am passing the value into HTML, I am not able to populate the value into the Dropdown List.
Following is my code for the same:
#using PagedList;
#using PagedList.Mvc;
#model IPagedList<NurseOneStop.SC.NurseProfile>
#{
ViewBag.Title = "People";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="peoplemain-container" ng-controller="connectCtrl">
<div class="row">
<div class="search-box">
#using (Html.BeginForm("People", "Nurse", FormMethod.Get))
{
<div class="j_searchName">
<input class="form-control" name="FirstName" placeholder="Search by FirstName" value="#ViewBag.FilterNurseSearch.FirstName" />
<input type="hidden" name="Connected" placeholder="Search Name" value="#(ViewBag.Connected == true ?"true":"false")" />
</div>
<div class="j_search2">
<center><button type="submit" class="btn btn-primary sb">Search</button></center>
</div>
}
</div>
<div class="search-box">
#using (Html.BeginForm("People", "Nurse", FormMethod.Get))
{
<div class="j_search">
<input class="form-control" name="FirstName" placeholder="Search by FirstName" value="#ViewBag.FilterNurseSearch.FirstName" />
<input type="hidden" name="Connected" placeholder="Search Name" value="#(ViewBag.Connected == true ?"true":"false")" />
</div>
<div class="j_search">
<input class="form-control" name="LastName" placeholder="Search by LastName" value="#ViewBag.FilterNurseSearch.LastName" />
</div>
<div class="j_search">
<input id="pinput" name="JobLocation" class="form-control" type="text" value="#ViewBag.FilterNurseSearch.JobLocation" placeholder="Enter a location">
<input id="Latitude" name="Latitude" type="hidden" value="#ViewBag.FilterNurseSearch.Latitude">
<input id="Longitude" name="Longitude" type="hidden" value="#ViewBag.FilterNurseSearch.Longitude">
</div>
<div class="j_search">
<select class="form-control" name="Profession">
<option value="#ViewBag.Profession" selected>Select Profession</option>
#for (int i = 1; i < ViewBag.Profession.Count + 1; i++)
{
<option value=#i #(ViewBag.FilterNurseSearch.Profession == i ? "selected" : "")>#ViewBag.Profession[i].Text</option>
}
</select>
</div>
<div class="form-group">
#Html.LabelFor(model => model., new { #class = "control-label" })
#Html.DropDownListFor(model => model.ParentProfessionId, (List<SelectListItem>)ViewBag.Profession, new { #class = "form-control" })
#Html.DropDownListFor(model => model.ParentProfessionId, (List<SelectListItem>)TempData["TempModel"], new { #class = "form-control" })
</div>
<div class="j_search2">
<center><button type="submit" class="btn btn-primary sb">Advance Search</button></center>
</div>
}
</div>
</div>
#foreach (var item in Model)
{
<div class="people_container">
<div class="connect_profile"><img src="#(item.ProfileUrl== "" ?"/image/placeholder.jpg" : #item.ProfileUrl)" title="#item.Title #item.FirstName #item.LastName" /></div>
<div class="clear"></div>
<div class="job_box">
<p><b>#item.Title #item.FirstName #item.LastName</b></p>
<p><span>#item.Profession</span></p>
</div>
<div class="job_box_btn">
<button class="details_btn">
#Html.ActionLink("View Nurse", "NurseView", "Nurse", new { NurseId = item.NurseId }, new { #class = "" })
</button>
<button class="details_btn">
<a style="display:#(item.Status==0? "block": "none")" id="connect_#item.NurseId" NurseFriendId="#item.NurseFriendId" ng-click="InviteNurse(#item.NurseId, 1)">Connect</a>
<a style="display:#(item.Status==1? "block": "none")" id="cancel_#item.NurseId" NurseFriendId="#item.NurseFriendId" ng-click="InviteNurse(#item.NurseId,3)">Cancel</a>
<a style="display:#(item.Status==2 || item.Status==3? "block": "none")" id="message_#item.NurseId" NurseFriendId="#item.NurseFriendId" href="/Nurse/GetInbox?FromNurseId=#NurseOneStop.WebSite.Models.ApplicationSession.CurrentUser.NurseId&ToNurseId=#item.NurseId&FromRecruiterId=&ToRecruiterId=">Message</a>
<div class="tick-right"><a style="display:#(item.Status==4? "block": "none")" id="accept_#item.NurseId" NurseFriendId="#item.NurseFriendId" ng-click="InviteNurse(#item.NurseId,2);"> <i class="fa fa-check"></i></a></div>
<div class="tick-wrong"><a style="display:#(item.Status==4? "block": "none")" id="reject_#item.NurseId" NurseFriendId="#item.NurseFriendId" ng-click="InviteNurse(#item.NurseId,3);"><i class="fa fa-times"></i></a></div>
</button>
</div>
</div>
}
<!--Confirm Modal -->
<div id="confirm" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content cancel-invitemodal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Cancel the Invitation to Connect</h4>
</div>
<div class="modal-body cancel-invitetion">
<h2>Are you sure you want to Cancel the Invitation to Connect</h2>
<div class="cancel-box">
<input type="button" class="btn" ng-click="RequestCancel(SelectedNurseId,3)" value="CANCEL INVITE">
<input type="button" class="btn" ng-click="Cancel()" value="DO NOT CANCEL INVITE">
</div>
</div>
</div>
</div>
</div>
<div class="pagination">
Page #(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of #Model.PageCount
#Html.PagedListPager(Model, page => Url.Action("People", new { page, Connected = ViewBag.Connected, SearchName = ViewBag.SearchName }), PagedListRenderOptions.OnlyShowFivePagesAtATime)
</div>
</div>
#section scripts{
<script>
function initMap() {
var input = document.getElementById('pinput');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function () {
var place = autocomplete.getPlace();
console.log(JSON.stringify(place));
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
var latlong = JSON.parse(JSON.stringify(place.geometry.location));
document.getElementById('Latitude').value = latlong.lat;
document.getElementById('Longitude').value = latlong.lng;
});
}
initMap();
function showhide(id) {
$("ul").hide();
$("#newpost" + id).toggle();
}
$('#pinput').on('input', function () {
document.getElementById('Latitude').value = '';
document.getElementById('Longitude').value = '';
// do your stuff
});
</script>
}
Following is how I am using my controller:
public void DropDown()
{
ProfessionDAL objProfessionDAL = new ProfessionDAL();
Profession objProfession = new Profession();
List<Profession> objProfessionList = new List<Profession>();
SelectListItem objSelect = new SelectListItem { Text = "Select Profession", Value = "", Selected = true };
objProfessionList = objProfessionDAL.GetProfessionList().Results;
var profession = (from kl in objProfessionList
select new SelectListItem
{
Text = kl.ProfessionName,
Value = kl.ProfessionId.ToString(),
Selected = false
}).ToList();
profession.Insert(0, objSelect);
ViewBag.Profession = profession;
}
public ActionResult People(bool Connected, int? page, FilterNurseSearch objFilterNurseSearch)
{
if (ApplicationSession.CurrentUser == null)
{
//redirect
return RedirectToAction("Login", "Account");
}
DropDown();
long NurseId = ApplicationSession.CurrentUser.NurseId;
ViewBag.FilterNurseSearch = objFilterNurseSearch;
Result objResult = objNurseDAL.GetNurses(NurseId, Connected, objFilterNurseSearch);
int pageSize = 12;
int pageNumber = (page ?? 1);
ViewBag.Connected = Connected;
return View(((List<NurseProfile>)objResult.Results).ToPagedList(pageNumber, pageSize));
}
I know I am making a silly mistake which I am not able to catch and henceforth, ask my fellow developers to help me.

Angular input type text or at least one check box validation

I am trying to implement the following behavior.
I have a form and I want to require filling at least one of the check boxes or text field.
I am trying to do this with the following code, but I don't know what am I doing wrong. Thanks in advance.
https://jsfiddle.net/AlexLavriv/mc8fj4f9/
// Code goes here
var app = angular.module('App', []).controller("Ctrl", Ctrl);
function Ctrl($scope) {
$scope.formData = {};
$scope.formData.selectedFruits = {};
$scope.fruits = [{'name':'Apple', 'id':1}, {'name':'Orange', 'id':2}, {'name':'Banana', 'id':3}, {'name':'Mango', 'id':4},];
$scope.someSelected = function (object) {
console.log(object);
for (var i in object)
{
if (object[i]){
return true;
}
}
return false;
}
$scope.submitForm = function() {
console.log($scope.formData.selectedFruits);
}
}
<div ng-controller="Ctrl" >
<form class="Scroller-Container" name="multipleCheckbox" novalidate >
<div ng-app>
<div ng-controller="Ctrl">
<div>
What would you like?
<div ng-repeat="(key, val) in fruits">
<input type="checkbox" ng-model="formData.selectedFruits[val.name]">
{{val.name}}
</div>
<p class="error" ng-show="submitted && multipleCheckbox.$error.required">Select check box or input text</p>
</div>
<pre>{{formData.selectedFruits}}</pre>
<input type="text" ng-required="!someSelected(formData.selectedFruits)" />
<input type="submit" id="submit" value="Submit" ng-click="submitted=true" />
</div>
</div>
</form>
</div>
You can't use ng-required with a function
You can find another solution here: https://jsfiddle.net/mc8fj4f9/2/
var app = angular.module('App', []).controller("Ctrl", Ctrl);
function Ctrl($scope) {
$scope.formData = {};
$scope.formData.selectedFruits = {};
$scope.fruits = [{'name':'Apple', 'id':1}, {'name':'Orange', 'id':2}, {'name':'Banana', 'id':3}, {'name':'Mango', 'id':4},];
$scope.submited=false;
$scope.someSelected = function (object) {
console.log(object);
for (var i in object)
{
if (object[i]){
$scope.checkboxSelected =true;
return true;
}
}
$scope.checkboxSelected =false;
return false;
}
$scope.submitForm = function() {
console.log("submit "+ $scope.formData.selectedFruits);
$scope.submitted=true;
$scope.someSelected($scope.formData.selectedFruits);
}
}
<div ng-controller="Ctrl" >
<form class="Scroller-Container" name="multipleCheckbox" novalidate>
<div ng-app>
<div ng-controller="Ctrl">
<div>
What would you like?
<div ng-repeat="(key, val) in fruits">
<input type="checkbox" ng-model="formData.selectedFruits[val.name]" ng-required = "!inputVal">
{{val.name}}
</div>
<p class="error" ng-show="submitted && !checkboxSelected && !inputVal">Select check box or input text</p>
</div>
<pre>{{formData.selectedFruits}}</pre>
<input type="text" ng-required="!checkboxSelected" ng-model="inputVal"/>
<input type="submit" id="submit" value="Submit" ng-click="submitForm()" />
</div>
</div>
</form>
</div>

How to show and hide <div>'s in Popover using AngularJS

I am working on SPA (Single Page Application) for Online Team Collaboration service(OTC) ,and I include HTML pages by ng-include,in some included page there is a popover ,this one contains a possibility for creating a public group chat,and in order to create one ,the user must submit, now my question is : how can i display a "successfully created" message in the same popover instead of the main div for creating the group in the popover?
The external page (the page that include other pages):
<div ng-show="ctrChanneldiv" ng-contoller="ctrChannelCon" style="float: right;" class="col-md-3">
<div ng-include="'CreateChannel.html'" ></div>
</div>
The Controller ctrChannelCon:
appvar.controller('ctrChannelCon',['$scope','$http','$rootScope',function($scope, $http, $rootScope){
$scope.createBtn = function() {
$http.post("http://localhost:8080/ExampleServletv3/crtchannelservlet",this.crtchannel)
.success(function(response) {
setTimeout(function () {
$scope.$apply(function(){
//******* Here Display "Successfully Created" In the Popover *******//
});
});
});
};
}]);
In CreateChannel.html :
<div>
<div class="row">
<a href="#" class="popper" data-toggle="popover"
data-placement="bottom"><span class="glyphicon glyphicon-plus"></span>Create Channel</a>
<div class="popper-content hide">
<div class="form-group">
<!-- ng-controller="createChannelCon" -->
<div class="form-group">
<label>Channel name:</label>
</div>
<div class="form-group">
<input ng-model="crtchannel.Name" type="text" placeholder="enter channel's name" maxlength="30"
class="form-control input-md" required />
</div>
<div class="form-group">
<label>Description:</label>
</div>
<div class="form-group">
<textarea cols="15" ng-model="crtchannel.Description" type="text"
placeholder="enter channel's description" maxlength="500"
class="form-control input-md" required></textarea>
</div>
<div>
<input ng-model="crtchannel.Type" type="radio" name="chtype"
value="private" required /> Private<br> <input
ng-model="crtchannel.Type" type="radio" name="chtype"
value="public" /> Public<br>
</div>
<div class="form-group">
<button ng-click="createBtn()" class="btn btn primary">Apply</button>
</div>
</div>
</div>
<script>
$('.popper').popover({
container : 'body',
html : true,
content : function() {
return $(this).next('.popper-content').html();
}
});
</script>
</div>
</div>
Any suggestions?
Thanks
You may use ngClass directive to counter this problem. ngClass directive allows conditional application of classes. Create a div for successfully created in the popup and set up ng-class directive with a variable in the scope and assign it true and false as per your requirement.
JS
appvar.controller('ctrChannelCon',['$scope','$http','$rootScope',function($scope, $http, $rootScope){
$scope.createBtn = function() {
$http.post("http://localhost:8080/ExampleServletv3/crtchannelservlet",this.crtchannel)
.success(function(response) {
setTimeout(function () {
$scope.$apply(function(){
//******* Change value of a model *******//
$scope.hidden = false;
});
});
});
};
}]);
HTML
<span ng-class="{hide: hidden}">Successfully Created</span>
CSS
.hide { display: none; }
Set a flag in your controller on success and use this flag to show or hide the success message:
...
<div class="form-group">
<button ng-click="createBtn()" class="btn btn primary">Apply</button>
</div>
<div ng-show="isSuccess">Successfully Created</div>
Inside the controller:
$scope.isSuccess = false;
$scope.createBtn = function() {
$http.post("http://localhost:8080/ExampleServletv3/crtchannelservlet",this.crtchannel)
.success(function(response) {
setTimeout(function () {
$scope.$apply(function(){
//******* Here Display "Successfully Created" In the Popover *******//
$scope.isSuccess = true;
});
});
});
};

Error: [ng:areq] Argument 'detailsController' is not a function, got undefined

I am trying to display the artist details when he or she is selected from a list but the error i get in my chrome console says that detailsController is not a function got undefined
list.html
<section class="artist">
<div class="search">
<h1>Artist Directory</h1>
<label>Search:</label>
<input ng-model="query" type="text" placeholder="Search for artists" autofocus/>
<p> </p>
<label class="formgroup"> by:
<select ng-model="artistOrder">
<option value="name">Name</option>
<option value="reknown">Reknown</option>
</select>
</label>
<label class="formgroup">
<input type="radio" ng-model="direction" name="direction" checked/>ascending
</label>
<label class="formgroup">
<input type="radio" ng-model="direction" name="direction" value="reverse"/> descending
</label>
</div>
<ul class="artistlist">
<li class="artist cf" ng-repeat="artist in artists | filter: query | orderBy: artistOrder:direction">
<a href="#/details/{{artists.indexOf(artist)}}">
<img ng-src="images/{{artist.shortname}}_tn.jpg" alt=""/>
<div class="info">
<h2>{{artist.name }}</h2>
<h3>{{artist.reknown}}</h3>
</div>
</a>
</li>
</ul>
</section>
details.html
<section class="artistinfo">
<div class="artist cf" ng-model="artists">
<h1>{{artists[whichItem].name}}</h1>
<div class="info">
<h3>{{artists[whichItem].reknown}}</h3>
<img ng-src="images/{{artists[whichItem].shortname}}_tn.jpg" alt=""/>
<div class="bio">{{artists[whichItem].bio}}</div>
</div>
</div>
</section>
controllers.js
var artistControllers = angular.module('artistControllers', []);
artistControllers.controller('listController', ['$scope', '$http', function ($scope, $http) {
$http.get('js/data.json').success(function (data) {
$scope.artists = data;
$scope.artistOrder = "name"; // name is selected in orderby
});
}]);
artistControllers.controller('detailsController', ['$scope', '$http','$routeParams', function($scope, $http, $routeParams) {
$http.get('js/data.json').success(function(data) {
$scope.artists = data;
$scope.whichItem = $routeParams.itemId;
});
}]);
app.js
var myApp = angular.module('myApp',[
'ngRoute',
'artistControllers'
]);
myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/list', {
templateUrl: 'partials/list.html',
controller: 'listController'
}).
when('/details/:itemId', {
templateUrl:'partials/details.html',
controller:'detailsController'
}).
otherwise({
redirectTo: '/list'
});
}]);