How to find and replace a specific text on a html page using AngularJs
That text is on a third party component so the id and the class is keeping changing. What I can reference is the text itself that I want to change.
That specific text on the html page is no class or id or any ng-tag around it.
I am not a angularjs developer and the page was built on asp.net mvc with the view (cshtml) using angularjs version1.
Is there a way in angularjs to find and place the text like the way in javascript:
document.body.innerHTML = document.body.innerHTML.replace('old_text', 'new_text');
Thank you!
In angularjs each application state(page) has a controller. The logic to access the Dom should placed in said controller.
To manipulate the DOM please see this answer
In Angular world, it's called data binding. Here are the official docs on data binding.
Here is the working DEMO of data being updated in time. First, html displays "Initial Text" and in 5 seconds it's changed to "New Text".
What was done for this demo:
An angular component was created with a dedicated variable $scope.text that holds text values that will change in time.
Then, this variable is used in the HTML markup, like this: {{ text }}.
Angular handles the HTML re-rendering automatically for you, so when the value of $scope.text is modified in the component, Angular forces re-rendering of the html in the browser
UPD another example with Angular two-way binding: DEMO.
Here user can change $scope.text value in the input field, which automatically changes its value in the controller. Try to edit the input field and you will see how it instantly updates in the header above the input field.
Related
http://embed.plnkr.co/keaGc3Y4Pmgfs04HJgnC/
Here is the link of my code.I am trying to validate my upload by disabling the load data button when the file is empty.
It is working for the first time,but when the next time I upload the file,ng-change is not working and the button is still showing disabled although I have uploaded the next file.
I am a beginner in AngularJS,so i might be doing some basic mistake.please help.
Since you are trying to upload the same file again, the onChange event will not fire, because it is the same file. To resolve this issue, you need to unset the input field after you uploaded the file. Unfortunately, you have to use jQuery (or get the element wit vanilla js) for this. So, in your onFileLoad function you could do something like this:
angular.element("input[type='file']").val(null); // Unset Input
$scope.filename = undefined; // Unset $scope property
Note that this is not the "angular" way of doing this. It would be better to move this into a directive, cause you should not manipulate the DOM within a Controller.
Update:
As said before, you need to include jQuery for this to work. Angular's jqLite does not support selecting DOM elements by its type. So, either you include jQuery (needs to be loaded before angular!) or you modify the code so you can use vanilla JS or jqlite.
Please change, initially
vm.foo = 'Monthly'
<input type="radio" name="{{item.deviceId}}" ng-model="renew.foo" ng-value="'Monthly'" ng-click="renew.updatePref(item, 'Monthly')">Monthly
<input type="radio" name="{{item.deviceId}}" ng-model="renew.bar" ng-value="'Yearly'" ng-click="renew.updatePref(item, 'Yearly')">Yearly
you have use ng-change, change event never happen as value for these input remains always same. use,
var vm = this;
you are also using ng-value="Monthly", Monthly is variable (undefiend) for ng-value. either use value="Monthly" or ng-value="'Monthly'".
Trying to figure out how to pass a value in service from one direction to another? I'm building a small search app using Elasticsearch and AngularJS. It has 2 pages, home and results. On home, only functionality is autocomplete (using AngularJS UI Bootstrap Typeahead), on results page, display results and search box. I'm trying to use a custom directive to do this.
I basically have everything working EXCEPT, that when on the homepage, pressing the search button just goes to the results page, no search processing is done. AND everything works on the results page, autocomplete and search functions...
I recently put the ng-model(searchTerms) into its own service, but I DI that service into both my controllers. The only thing I can think of is that somehow my ng-model ISN'T getting passed to the directive? I'm stumped... still learning AngularJS directives.
Basically all the service does for searchTerms is
this.searchTerms = null;
Any ideas?
UPDATE I'm on v1.47 and using ngRoute for now.
UPDATE 2 I have 2 way data binding working now. So when a query is submitted on the home page, the searchTerms variable now displays on the results page. However, there is still no results being displayed and no processing being performed. So just 2 way data binding is working.
UPDATE 3
'use strict';
angular.module('searchengine.query-service', [])
.service('queryService', function() {
var searchTerms;
this.searchTerms = null;
});
You can consider these 2 pages 'components', in the more update to date Angular jargon, and you want to navigate between them, passing your search term as a variable.
In your search page, you will need some code along the lines of
$router.navigate(['ResultsPage', {searchTerm: yourSearchTermGoesHere}]);
When the results component activates, it should check for the existence of a search term and perform whatever search processing is done when the search term subsequently changes.
Router docs - https://docs.angularjs.org/guide/component-router. Have a look specifically at the 'Extra Parameters' and 'Lifecycle hooks' section
I'm facing an interesting issue here.
I'm developing a Chrome Extension with a content script.
This extension is intended to add a little div to a page, this div using AngularJS. (I chose Angular because I want this div's data to be readily updated by change of var values).
I'm able to add the div once and bootstrap it. So the behavior of the div is fine.
But the main page (which I have no control over) often reloads everything using Ajax. (Then I'm totally unable - I think - to get events from certain elements being removed).
I was able to create ways to check if my elements are still on the page, and if not, they are added again. The appendChildPersistent method takes care of it. (It waits for a certain element to appear on the main page. Adds my element to it. Runs the callback when added. Keep checking if the element is still there, if not, repeat all over).
So all my ordinary elements work perfectly.
But this angular div cannot be bootstraped a second time.
Procedures:
I wait until a certain element appear on the main page
I add my own div myDiv from a plain text html using jquery append to the main page div
I load the angular application and bootstrap it using the callback function when the div is added:
Code:
var txt = '<div id="myDivId" ng-controller="myController">{{testing}}</div>';
appendChildPersistent('myDivId', MyDiv, '#theTargetMainPageDiv', function()
{
var app = angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.testing = 'Welcome!';
});
angular.bootstrap(document, ['myApp']);
});
So, the first time my div is added, it works. The angular vars and directives work (in this example, the div shows "Welcome!"). But the second time, I get an "already bootstrapped" error. (But if I do not try to bootstrap again, the div becomes just plain text, no angular behavior, showing "{{testing}}" instead of "Welcome!").
Is there a way to unboostrap, redo bootstrap or another method I could work to get around this?
Your application only focuses on the div you insert. You can make an Angular application run on a certain area of the page instead of covering the whole document. Simply pass the DOM element to the bootstrap function:
angular.bootstrap(myDiv, ['myApp']);
This way Angular only runs in your div and you are able to bootstrap the app every time you add a new div.
I want to display the contents from my model in a div which is contenteditable. User will modify this content and it should get saved in my model. I have used the example provided at https://docs.angularjs.org/api/ng/type/ngModel.NgModelController.
The code is available at http://plnkr.co/edit/ruKtNfDWP17npbFU4Te9?p=info
var app = angular.module('docApp', []);
The issue is:
ng-model attribute does not output the data in the div as it does in the input control. Therefore I have to use binding expression.
Because of that editing goes beserk.
How do I get it right?
Thanks.
In my experience contenteditable is extremely tricky for angular to deal with. See this issue on github (which has been open for over 3 years) for a lengthy discussion. You may want to try some third party modules such as akatov/angular-contenteditable.
I am creating a web app planner using Angular and I am having some difficulties with a <select> box that is not changing value based on the variable denoted with ng-model.
My architecture is as follows:
I am using ui-router which gives me different view states, one for each page of my planner. The root HTML page has a Controller called MainController. This is where I set up my JSON model, $scope.Master = {} that I want to use throughout the planner. All pages of the planner should inherit this model and continue to modify/add to it.
I then have my 4 pages of the planner like:
Start -> Accounts -> Settings -> Review
Each page has its own Controller that gets instantiated every time I visit the page. On the Start page, I have a <select> box that has ng-model="$scope.Master.Start.selectedAccount" that gets populated dynamically using the StartController (therefore it gets populated every time I come to the Start page).
This <select> works great on the first time to the page, but if I go to Accounts and then come back, the select box is back to the default value, "Please select an account", instead of the selected account that is in the $scope.Master.Start.selectedAccount model that is bound to the <select> box
I thought I could just do something like $scope.$apply or something in order to re-apply the binding to the DOM object, but that just gave me an error saying it is already digesting.
How can I apply the binding to the <select> box after the page has been loaded 2 or more times?
This is probably because every time you go back to your original page, a new controller is instantiated since it was removed from the DOM when you left it originally. Thus $scope.Master.Start.selectedAccount. To save this, you can either
Use a service / factory singleton on the main app to save this value
https://docs.angularjs.org/guide/services#!
Save $scope.Master.Start.selectedAccount as a global variable
https://docs.angularjs.org/api/ng/service/$rootScope
Put that controller on the outside
Im real sorry... I realized I was populating the <select> using ng-repeat instead of ng-options no idea how I managed that... That was the problem