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
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.
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.
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>
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;
});
});
});
};
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'
});
}]);