I have a input with ng-model="articleTitle" and a div with {{articleTitle. When someone types in the input the div is updated.
However, I have a box that lists all the articles with <div class="element">...</div> around them. When a person clicks a list div I want the input to update then in turn the div that shows the title.
Everything works if I type in the input box. However, selecting an article does update the input box but not the div. If I add anything into the input box the div does update.
How, can I tell Angularjs that the input changed without interacting direction with the input?
----- edit -----
per request I've added some relevant code. This also include suggestions by mohamedrias :
html:
<html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar ng-scope" lang="en-US" ng-app="coverEditor">
...
<div class="feature box" ng-controller="featureBox">
<div class="item">
<div class="edit">
<img src="/edit-image" />
<div class="form-elements">
<p class="title">Feature Settings</p>
<div class="element">
<p class="select-trigger">Article</p>
<div class="select-box" id="set-article">
<p class="title">Select Article</p>
<div class="element current" data-value="11">Test Article</div>
</div>
</div>
<div class="element">
<input type="text" name="feature" id="feature" ng-model="article.featureTitle" class="article-title" placeholder="Title" />
</div>
...
</div>
</div>
<div class="item-content featureBackColor">
<h1>{{article.featureTitle}}</h1>
</div>
</div>
</div>
angular-scripts.js (loads in header)
var coverEditor = angular.module("coverEditor",['ngRoute']);
coverEditor.controller('featureBox',function($scope){
$scope.article = {};
});
admin.js (jquery that loads in the footer)
$('#set-article .element').click(function(){
var articleElement = $(this);
var articleTitle = articleElement.text();
$('#theme-layout .element').removeClass('current');
articleElement.addClass('current');
articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
});
The purpose of the jquery is to get values/text from the selected article and place it in the input changing the value and hopefully updating the title via angular.
----- edit -----
code update
html:
<html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar ng-scope" lang="en-US" ng-app="coverEditor">
...
<div class="feature box" id="featureBox" ng-controller="featureBox">
<div class="item">
<div class="edit">
<img src="/edit-image" />
<div class="form-elements">
<p class="title">Feature Settings</p>
<div class="element">
<p class="select-trigger">Article</p>
<div class="select-box" id="set-article">
<p class="title">Select Article</p>
<div class="element current" data-value="11">Test Article</div>
</div>
</div>
<div class="element">
<input type="text" name="feature" id="feature" ng-model="article.featureTitle" class="article-title" placeholder="Title" />
</div>
...
</div>
</div>
<div class="item-content featureBackColor">
<h1>{{article.featureTitle}}</h1>
</div>
</div>
</div>
angular-script.js:
var coverEditor = angular.module("coverEditor",['ngRoute']);
coverEditor.controller('featureBox',function($scope){
$scope.article = {};
//set artcle
jQuery('#set-article .element').click(function(){
var articleElement = jQuery(this);
var articleTitle = articleElement.text();
var scope = angular.element("#featureBox").scope();
jQuery('#theme-layout .element').removeClass('current');
articleElement.addClass('current');
articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
scope.$apply();
});
});
Updated based on comment
As you're out of angular scope and changing the value in Jquery.
You must use $scope.$apply() after the jquery statement which sets the value.
$('#set-article .element').click(function(){
var articleElement = $(this);
var articleTitle = articleElement.text();
$('#theme-layout .element').removeClass('current');
articleElement.addClass('current');
articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
$scope.$apply();
});
Assuming you're doing it in link function of directive or inside the controller.
If you're completely out of angular scope, then use
var scope = angular.element(document.querySelector(".feature.box")).scope();
scope.$apply();
// change the selector based on your controller
So your code will be:
$('#set-article .element').click(function(){
var articleElement = $(this);
var articleTitle = articleElement.text();
$('#theme-layout .element').removeClass('current');
articleElement.addClass('current');
articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
var scope = angular.element(document.querySelector(".feature.box")).scope();
scope.$apply();
});
Related
Solved :)
var test = $('textarea[name=extract]').val();
var hh = $.parseHTML(test) ;
$.each($(test).find('.tile__link'),function(i,b){
var reff = $(this).attr('href');
$('.links').append("link/" +reff + "<br><br>");
})
I have HTML code copied from an website. And I want all href values with the class .tile_link in a String.
I did not find an solution, how I can get the value of href with the class .tile_link without the divs and text just the link?
Here's an example:
var test = $('textarea[name=extract]').val();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="extract">
<span class="txt-raise">8min</span>
</div></div>
<div class="js-hunq-badge fit-tr pr-- pt--"></div>
<div class="tile__footprint">
</div>
</a>
</div><div class="tile grid-tile tile--bordered"> <a href="#/profile//grid" class="tile__link">
<div role="image" aria-label="HSHBerl" style="background-image:url()" class="tile__image"></div>
<div class="bg-raise tile__info">
<div class="info info--middle txt-raise">
<div class="txt-truncate layout-item--consume">
<div class="typo-small lh-heading txt-truncate">
8 km <span class="icon icon-small icon-gps-needle icon-badge"></span>
</div>
<div class="lh-heading txt-truncate">
<div class="info__main-data">
<div class="info__username">
</div>
<div class="js-romeo-badge"></div>
<div class="info__icon-set">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__onlinestate js-online-state"><div>
<span class="icon icon-online-status ui-status--online icon-raise" title="Online"></span>
</textarea>
But I don't know how to extract it to get only the values of href.
You can do someting like this:
$(".tile_link").attr('href');
If you have more than one element with that class, you can do forEach or map.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Example:
$('.tile_link').map(function (element) { return $(this).attr('href'); });
I have a number of <div> tags and I'm assigning them a function that allows me to display a kind of modal with details from the <div> element by changing it's css propriety 'display' to 'block' instead of 'none'. for some reason the modal doesn't display when I click on the <div> element. but when I assign the same function to a button it does.
$scope.CountryDetailStyle = {
'display': 'none'
};
$scope.CountryDetail = function(idCount, nameCount, descCount) {
$scope.detailId = idCount;
$scope.detailName = nameCount;
$scope.detailDesc = descCount;
$scope.CountryDetailStyle = {
'display': 'block'
};
// alert('idCount : '+idCount+' nameCount : '+nameCount+' descCount : '+descCount);
}
<div id="pageContent" ng-controller="myAdminController">
<div class="countries" ng-repeat="country in countries" title="{{country.descCount}}" ng-click="CountryDetail(country.idCount, country.nameCount,
country.descCount)">
<label> {{country.nameCount}} </label><br/>
<img ng-src="uploads/{{country.image}}" alt="Image Not Found"><br>
</div>
</div>
<div>
<button ng-click="CountryDetail(country.idCount, country.nameCount,
country.descCount)" style="display:block; float:right; clear:both;">Display Country Detail</button>
</div>
<div class="countryDetails" ng-style=CountryDetailStyle>
<!--this is the modal i want to display -->
<div class="content">
<div class="boxHeader">
<label>{{detailName}}</label>
</div>
<div class="boxContent">
<form>
<p>{{detailDesc}}</p>
Read More
</form>
</div>
</div>
</div>
can someone tell me what's the problem? thanks.
you should not display/hide elements based on some display: none condition. thats what ng-show (and ng-if) is for. Use a $scope variable like $scope.isModalVisible and set that to true or false.
Then you can use on your element ng-show="isModalVisible"
var app=angular.module("myApp",[]);
app.controller("myAdminController",["$scope",function($scope){
$scope.CountryDetailStyle = {'display': 'none'};
$scope.countries=[
{
idCount:"1",
nameCount:1,
descCount:1
},{
idCount:"2",
nameCount:2,
descCount:2
},{
idCount:"3",
nameCount:3,
descCount:3
},{
idCount:"4",
nameCount:4,
descCount:4
}
]
$scope.CountryDetail = function(idCount, nameCount, descCount){
$scope.detailId = idCount;
$scope.detailName = nameCount;
$scope.detailDesc = descCount;
$scope.CountryDetailStyle = {'display': 'block'};
}
}]);
<html lang="en">
<head></head>
<body ng-controller="myAdminController" ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="pageContent">
<div class="countries" ng-repeat="country in countries" title="{{country.descCount}}" ng-click="CountryDetail(country.idCount, country.nameCount,
country.descCount)">
<label> {{country.nameCount}} </label><br/>
<button ng-click="CountryDetail(country.idCount, country.nameCount,
country.descCount)" style="display:block; float:right; clear:both;">Display Country Detail</button>
</div>
<br><br>
<div class="countryDetails" ng-style=CountryDetailStyle>
<div class="content">
<div class="boxHeader">
<label>{{detailName}}</label>
</div>
<div class="boxContent">
<form>
<p>{{detailDesc}}</p>
<a href="#" class="btn" style="text-decoration:none;" >Read More</a>
</form>
</div>
</div>
</div>
</body>
</html>
So I found a solution, still don't know why it works but it does. I moved the </div> of the div with the id="pageContent" to just before the body closing tag. That fixed everything. Thank you guys for the help.
I am not able to perform the auto suggestion functionality on divs with contenteditable attribute. Also when I write mass-autocomplete to divs, it is showing an error message like "mass-autocomplete not allowed on element div".
The following is code I have written. Could you please give the solution for this?
$scope.getClients = {
suggest: suggest_Client
};
<div class="row">
<div class="col-xs-12">
<div class="marginTB15" mass-autocomplete>
<div class="reach_box" contenteditable="true" ng-model="user.communities" mass-autocomplete-item="getNetworks">
<span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
<div class="reach"></div>
</div>
</div>
</div>
</div>
Seems that you using the mass-autocomplete directive incorrectly, it need so have an <input> tag as a element. Consider just having 2 blocks inside your div - one is a normal autocomplete:
<div mass-autocomplete>
<input ng-model="user.communities" mass-autocomplete-item="getNetworks">
</div>
while another one is a static end result of the autocompletion - say <div>{{user.communities}}</div>. And those two will be toggled by click for example. By this you wont' need content-editable at all.
So full code may look like this:
//controller
$scope.stateEdit = false;
$scope.toggleWidgetState = function(){
$scope.stateEdit = !$scope.stateEdit;
}
$scope.getClients = {
suggest: suggest_Client,
on_select:toggleWidgetState //here we put our widget back to read-only state
};
//other logic to handle mass-autocomplete
//template
<div class="row">
<div class="col-xs-12">
<div mass-autocomplete ng-show="stateEdit">
<input ng-model="user.communities" mass-autocomplete-item="getNetworks">
<ul> <li>Cardiologist Connect<button type="button">X</button></li></ul>
</div>
<div ng-show="!stateEdit" ng-click="toggleWidgetState()">
{{getNetworks}}
<span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
<div class="reach"></div>
</div>
</div>
</div>
I am trying to use jQuery to get the value of the divs with the classes of more_details_con, more_details_desc and more_details_res and when edit_entry is clicked but I don't think I am traversing the DOM correctly because the alert just says undefined.
The HTML
<div class="details">
<span class="id">1234</span>
<span class="contact">account name</span>
</div>
<div class = "more_details">
<div class = "more_details_btns">
<div class="go_account">Go to Account</div>
<div class="edit_entry">Edit</div>
<div class="delete_entry">Delete</div>
</div>
<div class="container">
<div class="more_details_title">Contact:</div>
<div class="more_details_con">Contact name</div>
<p class="clear"></p>
</div>
<div class="container">
<div class="more_details_title">Description:</div>
<div class="more_details_desc">Actual Description</div>
<p class="clear">
</div>
<div class="container">
<div class="more_details_title">Resolution:</div>
<div class="more_details_res">Actual Resolution</div>
<p class="clear">
</div>
</div>
The jQuery I've tried
$("#results").on("click", ".edit_entry", function() {
var contact = $(this).next(".more_details_con").html();
var desc = $(this).next(".more_details_desc").html();
var res = $(this).next(".more_details_res").html();
alert(contact+desc+res);
});
The issue is because the elements you're looking for are not siblings of the one which raised the event. You instead could use closest() to find the nearest common parent element, .more_details, and then find() to get the element you want. Try this:
$("#results").on("click", ".edit_entry", function() {
var $parent = $(this).closest('.more_details');
var contact = $parent.find(".more_details_con").text();
var desc = $parent.find(".more_details_desc").text();
var res = $parent.find(".more_details_res").text();
console.log(contact, desc, res);
});
My code is:
<div ng-controller="myCtrl">
<div class="row">
<div class="col-md-4 col-sm-3">
<checked-input ng-scope="$eventID"></checked-input>
</div>
<div class="col-md-4 col-sm-3">
<output ng-scope="$postbackOutput">***This is where I want the text typed in the textbox to go***</output>
</div>
<div class="col-md-3 col-sm-3">
<a ng-click="generateURL($eventID)" class="btn-plus">
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
</div>
</div>
So what I'm trying to do is get that $eventID that's inside the first column div, then pass it as an argument to the function call generateURL() when the link in the <a> tag is clicked in the third column. Inside the controller I have:
app.controller('postbackCtrl', function($scope) {
$scope.generateURL = function(eventID) {
$scope.postbackOutput = eventID;
}
});
But it doesn't seem to be setting the text in the <output> correctly. Could anyone help? I've just started out with angular so it's a bit confusing.
You can just bind the var to the view with handlebar brackets:
<output ng-scope="$postbackOutput">
{{ postbackOutput }}
</output>
Here is a working plunkr