I have list array.Inside that I have one nested array called types.I am trying to show types.work inside an input field with comma separated.
This is what I have tried:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.init = function(){
$scope.list=[
{
"name":"john",
"types":[
{"work":"aa"},
{"work":"bb"}
]
}
];
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl" ng-init="init()">
<input type="text" ng-model="list.name">
<label ng-repeat="data in list.types">{{data.work}}{{$last ? '' : ', '}}</label>
</div>
</div>
Can anyone tell me that how to use ng-repeat values in single input?.
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.init = function(){
$scope.list=[
{
"name":"john",
"types":[
{"work":"aa"},
{"work":"bb"}
]
}
];
$scope.input_model_value = ''
var temp = []
$scope.list.forEach(function(t1){
t1.types.forEach(function(val){
temp.push(val.work)
})
})
$scope.input_model_value = temp.join(',')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl" ng-init="init()">
<input type="text" ng-model="input_model_value">
<label ng-repeat="data in list.types">{{data.work}}</label>
</div>
</div>
use multiple ng-repeat to access the nested array.
<label ng-repeat="data in list">
<label ng-repeat="d in data.types">
{{d.work}}
</label>
</label>
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.init = function(){
$scope.list=[
{
"name":"john",
"types":[
{"work":"aa"},
{"work":"bb"}
]
}
];
$scope.name = $scope.list[0].types.map((o) => o.work)
$scope.name = $scope.name.join(",")
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl" ng-init="init()">
<input type="text" ng-model="name">
<label ng-repeat="data in list">
<label ng-repeat="d in data.types">
{{d.work}}
</label>
</label>
</div>
</div>
In case You want some other solution. You can iterate over your array in JS file and assign the value to your input model.
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<body>
<div ng-app="app">
<div ng-controller="MainCtrl" ng-init="init()">
<input type="text" ng-model="listData">
</div>
</div>
</body>
<script>var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.init = function(){
$scope.list=[
{
"name":"john",
"types":[
{"work":"aa"},
{"work":"bb"}
]
}
];
$scope.listData = "";
for(var i=0;i<$scope.list[0].types.length;i++){
if($scope.listData!= undefined){
$scope.listData = $scope.listData+","+$scope.list[0].types[i].work;
}
}
}
});
</script>
</html>
You added the list an array so you can use ng-repeat in ng-repeat or you can directly use array first object like this
<input type="text" ng-model="list[0].name">
<label ng-repeat="data in list[0].types">{{data.work}}{{$last ? '' : ', '}}</label>
Related
Everything is in the title...
I can't get this to work:
(function(angular) {
'use strict';
angular.module('app', [])
.controller('ctrl', ['$scope', function($scope) {
$scope.init = function() {
$scope.response = "press the button";
}();
$scope.data = {
availableOptions: [{
id: '1',
name: 'num'
}],
selectedOption: {
name: 'selected field'
}
};
$scope.data2 = {
availableOptions2: [{
id: '0',
name: 'null'
}
],
selectedOption2: {
name: 'null'
}
};
$scope.search = function() {
$scope.response = "you pressed a button \\o/";
alert($scope.response);
};
$scope.request = function(req) {
$http(req).then(function() { /*successCallback*/ },
function() { /*errorCallback*/ });
};
}]);
})(window.angular);
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="//code.angularjs.org/1.7.3/angular.min.js"></script>
<script src="analyzer.js"></script>
</head>
<body ng-app="app">
<div ng-controller="ctrl" ng-show="true">
<!--class="ng-hide" is automatically added when ng-show="false"-->
<!--SEARCH-->
<form name="myForm">
<label for="mySelect">Select a field:</label>
<select name="mySelect" id="mySelect" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption"></select>
<br/>
<div style="color:#757575">
<input ng-model="query" type="text" size=45 class="form-control" placeholder="Search your {{data.selectedOption.name}} here..." />
<div ng-show="true">
or directly select your choice here...
<select name="subSelect" id="subSelect" ng-options="option.name for option in data2.availableOptions2
track by option.id" ng-model="data2.selectedOption2"></select>
<br/>
<button style="color:#757575" ng-click="search()">
...and go!</button>
</div>
</div>
</form>
<!--RESPONSE-->
<div ng-controller="ctrl" ng-show="true">
<p>{{response}}</p>
</div>
</div>
</body>
</html>
We can see that, even in this snippet, the view is not updated when I change the value of $scope.response... and alert($scope.response) shows that the button is okay... The use of things like $interval, $timeout, $apply, $watch did not solve the problem. Any ideas?
Thanks for your time.
And sorry if it was a dupe ; I just couldn't find the solution.
You are re instantiating the controller again which will re create the controller, in that case response is undefined, remove
<div ng-controller="ctrl" ng-show="true"> //remove ng-controller
<p>{{response}}</p>
</div>
Working snippet :
(function(angular) {
'use strict';
angular.module('app', [])
.controller('ctrl', ['$scope', function($scope) {
$scope.init = function() {
$scope.response = "press the button";
}();
$scope.data = {
availableOptions: [{
id: '1',
name: 'num'
}],
selectedOption: {
name: 'selected field'
}
};
$scope.data2 = {
availableOptions2: [{
id: '0',
name: 'null'
}
],
selectedOption2: {
name: 'null'
}
};
$scope.search = function() {
$scope.response = "you pressed a button \\o/";
alert($scope.response);
};
$scope.request = function(req) {
$http(req).then(function() { /*successCallback*/ },
function() { /*errorCallback*/ });
};
}]);
})(window.angular);
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="//code.angularjs.org/1.7.3/angular.min.js"></script>
<script src="analyzer.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl" >
<div ng-show="true">
<!--class="ng-hide" is automatically added when ng-show="false"-->
<!--SEARCH-->
<form name="myForm">
<label for="mySelect">Select a field:</label>
<select name="mySelect" id="mySelect" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption"></select>
<br/>
<div style="color:#757575">
<input ng-model="query" type="text" size=45 class="form-control" placeholder="Search your {{data.selectedOption.name}} here..." />
<div ng-show="true">
or directly select your choice here...
<select name="subSelect" id="subSelect" ng-options="option.name for option in data2.availableOptions2
track by option.id" ng-model="data2.selectedOption2"></select>
<br/>
<button style="color:#757575" ng-click="search()">
...and go!</button>
</div>
</div>
</form>
<!--RESPONSE-->
<div ng-show="true">
<p>{{response}}</p>
</div>
</div>
</body>
</html>
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>
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());
});
};
})
Sorry for dump, question, I am new to AngularJS and to JavaScript. I would like to iterate over collection by clicking the button.
<body ng-init="customers = [
{'name':'John', 'city':'Doe'},
{'name':'Anna', 'city':'Smith'},
{'name':'Peter', 'city':'Jones'}
]">
<div class="container" ng-app="myApp" ng-controller="myCtrl" >
<div class="span12">
<h1>{{name}}</h1>
<br/>
<p>{{city}}</p>
<button type="button" name="button" value="Next" ng-click="makeIterator($scope.customers)"></button>
</div>
</div>
So after clicking Next button I would like to see next iteration of customers displayed. How could I make it?
You can store an index and increment it when clicking on the button
<body ng-app="myApp">
<div class="container" ng-controller="myCtrl" >
<div class="span12">
<h1>{{customers[currentCustomerIdx].name}}</h1>
<br/>
<p>{{customers[currentCustomerIdx].city}}</p>
<button type="button" name="button" value="Next"
ng-click="index = (index + 1) % customers.length"></button>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
$scope.customers = [
{'name':'John', 'city':'Doe'},
{'name':'Anna', 'city':'Smith'},
{'name':'Peter', 'city':'Jones'}];
$scope.currentCustomerIdx = 0;
});
</script>
PFB the approach to do it:
<body>
<div class="container" ng-app="myApp" ng-controller="myCtrl">
<div class="span12">
<h1>{{customers[counter].name}}</h1>
<br/>
<p>{{customers[counter].city}}</p>
<button type="button" name="button" value="Next" ng-click="iterate();">NEXT</button>
</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) {
$scope.customers = [
{'name':'John', 'city':'Doe'},
{'name':'Anna', 'city':'Smith'},
{'name':'Peter', 'city':'Jones'}
]
$scope.counter=0;
$scope.maxCount = $scope.customers.length - 1;
$scope.iterate = function(){
if($scope.counter == $scope.maxCount)
{
$scope.counter=0;
}
else{
$scope.counter++;
}
}
});
</script>
</body>
You can store an index on the controller's scope to iterate over the customers array by binding a click event on a button and use the index to retrieve a customer from the customers array.
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
function DefaultController() {
var vm = this;
vm.index = 0;
vm.customers = customers;
vm.customer = vm.customers[vm.index];
vm.nextCustomer = nextCustomer;
function nextCustomer() {
vm.index = vm.index + 1;
if (vm.index === vm.customers.length) {
vm.index = 0;
}
vm.customer = vm.customers[vm.index];
}
}
var customers = [
{ name: 'Name 1', city: 'City 1' },
{ name: 'Name 2', city: 'City 2' },
{ name: 'Name 3', city: 'City 3' },
];
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl">
<div>
<span>Customer: </span>{{ctrl.customer.name}}
</div>
<div>
<span>City: </span>{{ctrl.customer.city}}
</div>
<button type="button" ng-click="ctrl.nextCustomer()">Next</button>
</div>
</div>
I have one controller, controller's template/view as below,
myController
angular.module('myApp', []).
controller('myController', ['$scope', function($scope) {
$scope.myObject = {};
}]);
myView
<div class="container" ng-app="myApp">
<form name="myForm" novalidate ng-controller="myController">
<div class="form-group">
<label for="firstname" class="control-label col-xs-2">Name</label>
<div class="col-xs-10">
<input type="text" ng-model="myObject.firstname" id="firstname">
</div>
</div>
<div class="form-group">
<label for="lastname" class="control-label col-xs-2">LastName</label>
<div class="col-xs-10">
<input type="text" ng-model="myObject.lastname" id="lastname">
</div>
</div>
</form>
</div>
here whenever user enters any data it gets reflected to myObject with firstname and lastname as dynamic properties for myObject.
Now my new requirement is to add multiple dynamic views for firstname and lastname in the same view(For that I will be creating a directive and appending dynamically), and now I want myObject to be an array of objects like
myObjectArray = [{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"}]
and here each object should be populated through dynamically added views by user input using angular two way binding. But I am not sure how can I achieve this with angular, how to add object to array whenever there is a new directive template added to view dynamically.
In Angular you should avoid thinking in terms of dynamic controls.
Here is the approach
You want to list firstname, lastname objects
You want to add a new object to this list.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [];
$scope.itemsToAdd = [{
firstName: '',
lastName: ''
}];
$scope.add = function(itemToAdd) {
var index = $scope.itemsToAdd.indexOf(itemToAdd);
$scope.itemsToAdd.splice(index, 1);
$scope.items.push(angular.copy(itemToAdd))
}
$scope.addNew = function() {
$scope.itemsToAdd.push({
firstName: '',
lastName: ''
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-repeat="item in items">
{{item.firstName}} {{item.lastName}}
</div>
<div ng-repeat="itemToAdd in itemsToAdd">
<input type="text" ng-model="itemToAdd.firstName" />
<input type="text" ng-model="itemToAdd.lastName" />
<button ng-click="add(itemToAdd)">Add</button>
</div>
<div>
<button ng-click="addNew()">Add new</button>
</div>
</body>
Notice these are simply talking about model. Here is a plunk