I'm a beginner of AngularJS, and I cannot solve the problem of the title. If we push the button changeText in the following code, the text of the textarea will change. But this event doesn't happen if we push the button changeTextNew which is added by pushing another button addNewButton`.
html
<div ng-app="app" ng-controller="MainCtrl">
<input name="widget.title" ng-model="widget.title"><br>
<input type="button" ng-click="setText()" value="changeText"><br>
<input type="button" id="piyo" value="addNewButton">
<div id="fuga"></div>
</div>
js
angular.module('app', [])
.controller('MainCtrl', function($scope) {
$scope.widget = { title: 'before' };
$scope.setText = function() {
this.widget.title = "after"
}
});
$(document).on('click', '#piyo', function() {
$('#fuga').append("<input type='button' ng-click='setText()' value='changeTextNew'><br>")
})
https://jsfiddle.net/sn512/guqjatt6/
Try to avoid using jQuery together with AngularJS.
Try this:
angular.module('app', [])
.controller('MainCtrl', function($scope, $compile) {
$scope.widget = { title: 'before' };
$scope.setText = function() {
this.widget.title = "after"
}
$(document).on('click', '#piyo', function() {
$("#fuga").append($compile("<input type='button' ng-click='setText()' value='changeTextNew'><br>")($scope));
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
<input name="widget.title" ng-model="widget.title"><br>
<input type="button" ng-click="setText()" value="changeText"><br>
<input type="button" id="piyo" value="addNewButton">
<div id="fuga"></div>
</div>
Related
Google maps allows one to get the coordinates from the auto-complete library. I cannot seem to find a way of doing it with ngMap without involving the "controller as" syntax. I want to get the coordinates and output them to console with just $scope.
var app = angular.module("App", ["ngMap"]);
app.controller("MyCtrl", function ($scope, NgMap) {
$scope.placeChanged = function placeChanged() {
var place = this.getPlace();
console.log(place.place.geometry.location)
};
});
<html ng-app="App">
<script src="https://maps.google.com/maps/api/js?libraries=places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-controller="MyCtrl">
<input type="text" name="address" places-auto-complete ng-model="address" on-place-change="placeChanged()">
</div>
</html>
Directive places-auto-complete has on-place-changed in NgMap
html:
<div ng-controller="MyCtrl">
<input places-auto-complete ng-model='address' on-place-changed="getCoords()" />
</div>
Script: when the place changes ng-model is updated and the
var app = angular.module("App", ["ngMap"]);
app.controller("MyCtrl", function($scope, NgMap) {
$scope.address = '';
$scope.getCoords = function() {
NgMap.getGeoLocation($scope.address).then(function(latlng) {
console.log(latlng.lat());
console.log(latlng.lng());
});
};
})
i want to send a http get request which is not a problem.
But the problem is i want to disply the data from the server page. Does it has to be a JSON page to display the data from remote server ? or any sort of data can be displayed ? if yes , then how
Thank you
<div class="form" ng-app="myApp" ng-controller="myCtrl">
<p>Enter URL : <input type="text" ng-model="url" /></p>
<p><input type="submit" value="CHECK" ng-click="callAPI()" /> </p> <!-- 1 -->
<p>
<ul ng-repeat="post in posts">
<li>{{post}}</li>
</ul>
</p>
<div ng-bind="result"></div> <!-- 5 -->
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.callAPI = function() { // 2
//console.log($scope.url); //3
$http.get($scope.url)
.success(function(response) {
$scope.posts = response.data; //4
});
};
});
</script>
</body>
</html>
another version of code
<div class="form" ng-app="myApp" ng-controller="myCtrl">
<p>Enter URL : <input type="text" ng-model="url" /></p>
<p><input type="submit" value="CHECK" ng-click="callAPI()" /> </p>
<div ng-bind="result"></div> <!-- 5 -->
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.$watch('url', function() {
fetch();
});
function fetch() {
console.log($scope.url);
$http.get($scope.url)
.success(function(response) {
$scope.result = response.data;
});
}
$scope.callAPI= function() {
this.setSelectionRange(0, this.value.length);
}
});
</script>
</body>
</html>
Like the comments says, I believe that angular look at the content Type of the response to parse the data. Have you try added the accept header type?
What is the content type of the response?
var req = {
method: 'GET',
url: 'http://example.com',
headers: {
'Accept': change this to whatever content you want to accept
},
data: { test: 'test' }
}
$http(req).then(function(){...}, function(){...});
hey i have found my answer of my question ...
there was a mistake in the source code
here is the right one
<div class="form" ng-app="myApp" ng-controller="myCtrl as controller">
<p>Enter URL : <input type="text" ng-model="url" /></p>
<p><input type="submit" value="CHECK" ng-click="clickButton()" /> </p>
<p>
<ul>
<li ng-repeat="data in result">
{{data}}
</li>
</ul>
</p>
</div>
and
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.clickButton = function() {
console.log($scope.url);
$http.get($scope.url)
.then(function(response) {
$scope.result = response.data;
});
};
});
</script>
:)
if anyone has a similer problem , i hope this answer will help ..
cheers
function functionName(){
$http.get(URL).success(function(response){
$scope.variable = response;
})
}
inside get() put your url, if your url returning any data then it will go to success() function.
I have the following to create a job with a position and multiple requirements Plunker example:
<div ng-controller="MainCtrl as vm">
<div>Position: <span data-ng-bind="vm.job.position"></span></div>
<br/>
<form name="form" data-ng-submit="vm.create(job)">
<label for="position">Enter the Position</label>
<input id="position" name="vm.job.position" type="text" data-ng-model="vm.job.position" />
<div>
<br/>
Requirements:
<br/>
<ul>
<li data-ng-repeat="r in vm.job.requirements">{{r.name}}</li>
</ul>
<input id="name" name="requirement.name" type="text" data-ng-model="requirement.name" />
<input type="button" value="Add Requirement" class="button" data-ng-click="vm.addRequirement(requirement)"/>
</div>
<br/><br/>
<button>Create Job</button>
</form>
</div>
the controller
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var vm = this;
vm.job = { position: '', requirements: [] };
vm.create = function (job) {
alert("job created");
}
vm.addRequirement = function (requirement) {
vm.job.requirements.push(requirement);
}
});
When I add a requirement I see it on the list but when I try to add a new one, the one that is already in the list start to change. I do not want that. I want to add a new one to the list.
Finally, when I submit the form using "Create Job" is where I will send all the Job data to the API.
The problem is with your addRequirement function, because you are adding the same object to the list (and that's the reason your item changes the name when you edit the input box).
To make your example work as intended you should push a clone of the requirement object (see documentation).
vm.addRequirement = function (requirement) {
vm.job.requirements.push( angular.copy(requirement) );
}
The easiest way to do this, is simply use ng-model on the input that you would like to append to your list. Then you can easily access it from the controller.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var vm = this;
vm.job = { position: '', requirements: [] };
function create(job) {
alert("job created");
}
function addRequirement() {
vm.job.requirements.push(vm.currentRequirement);
}
vm.create = create;
vm.addRequirement = addRequirement;
});
and in the html:
<input type="button" value="Add Requirement" ng-click="vm.addRequirement()"/>
I've got a problem related to the visibility of a button. I have to hide a button when there is no text in the form field, and show it back when it's filled. I've got some code:
<div class="TextAreaCont">
<input ng-model="pageUrl" placeholder="Facebook Page URL" type="text">
</div>
<div class="ButtonCont" ng-show="ctrl.isButtonVisible()">
<button ng-click="ctrl.send()">Fetch data</button>
</div>
And I wrote it:
Facebook.controller('PageCtrl', ['$scope', function($scope){
$scope.isButtonVisible = function(){
if($scope.pageUrl){return true}else{return false}
};
Where is the problem?
To be honest, I've never leart JS and Angular.
Here is my solution
var Facebook = angular.module('Facebook', []);
Facebook.controller('PageCtrl', [function(){
var ctrl = this;
ctrl.isButtonVisible = function(){
if(ctrl.pageUrl){
return true;
}else{
return false;
}
};
ctrl.send = function(){
console.log('Page URL: ' + ctrl.pageUrl)
};
}]);
See Plunker for more details.
Few problems that I can spot in your original code:
when using controller as syntax, use 'this' keyword, not $scope inside your controller
ng-model="pageUrl" should be ng-model="ctrl.pageUrl"
Just FYI, isButtonVisible() will be evaluated on every digest cycle, so there no need for watchers of ng-change.
try this.
i put simple example.
var app = angular.module('app', []);
app.controller('TestController', function ($scope) {
$scope.display = false;
$scope.isButtonVisible = function(pageUrl){
if(pageUrl){
$scope.display = true;
}
else{$scope.display = false;}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="TestController">
<input ng-model="pageUrl" placeholder="Facebook Page URL" type="text" ng-change="isButtonVisible(pageUrl)">
<div class="ButtonCont" ng-show="display">
<button ng-click="send()">Fetch data</button>
</div>
<input ng-model="pageUrl2" placeholder="Facebook Page URL" type="text" ng-change="isButtonVisible(pageUrl)">
<div class="ButtonCont" ng-show="pageUrl2">
<button ng-click="send()">Fetch data</button>
</div>
</div>
I have two textarea, I want to use the content on the first to update the second immediately the user clicks the textarea using ng-change. Bt when I click on the textarea, no update is made. Below is the two textarea
<textarea ng-change="content=emojiMessage.messagetext | colonToCode" placeholder="emoji..." ng-bind="emojiMessage.messagetext | colonToCode" id="messageInput"></textarea>
<input ng-hide="false" type="text" id="message" name="message" ng-model="content" value="{{content}}" />
What could be wrong?
Now the snippet is using ng-focus instead, but with the same function.
var app = angular.module('myApp', []);
app.filter('colonToCode', function(){
return function (data) {
return data + ' Something added by the filter';
};
});
app.controller('ctrl', function($scope, $filter) {
$scope.content = 'Something';
$scope.emojiMessage = {
messagetext: 'smilie face'
};
$scope.setContent = function(text){
$scope.content = $filter('colonToCode')(text);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="ctrl">
<textarea ng-focus="setContent(emojiMessage.messagetext)" placeholder="emoji..." ng-model="emojiMessage.messagetext" id="messageInput"></textarea>
<input ng-hide="false" type="text" id="message" name="message" ng-model="content" value="{{content}}" />
</div>
</div>