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>
Related
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>
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>
i want load array objects from multi select control, then i want load model object called "name" with his name and age values, then i want load array from select and load in model object.... but the ng-model from select control not work :/
<input type="text" class="form-control" ng-model="model.name" placeholder="Put your name..." />
<input type="text" class="form-control" ng-model="model.age" placeholder="Put your age..." />
<!--Select pets for model person-->
<select ng-repeat="pets in arrayFromApi" class="selectpicker" multiple>
<option id="{{pet.id}}" ng-model="model.pets.id">{{pet.name}}</option>
</select>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.model = { "name":"", "age":"", "pets" :[ {"id":""} ] };
$scope.arrayFromApi = function() {
......
this function get id names
}
});
</script>
You will probably need to use ng-options.
You can give it a try with ng-repeat but then it should be on option tag only.
Avoid using ng-repeat on the dropdowns, it casuses some performance issues. instead use ng-options.
And for havint the model with name, age and pets. check the mixData funciton.
<input type="text" class="form-control" ng-model="model.name" placeholder="Put your name..." />
<input type="text" class="form-control" ng-model="model.age" placeholder="Put your age..." />
<!--Avoid ng-repeat in dropdowns-->
<!--Select pets for model person-->
<select ng-change="mixData()" class="selectpicker" multiple ng-model="myPets" ng-options="pet.id as pet.name for pet in arrayFromApi">
<option value="">Select...</option>
</select>
<!--<select ng-repeat="pets in arrayFromApi" class="selectpicker" multiple>
<option id="{{pet.id}}" ng-model="model.pets.id">{{pet.name}}</option>
</select>-->
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.model = { "name":"", "age":"", "pets" :[ {"id":""} ] };
$scope.arrayFromApi = function() {
......
this function get id names
}
$scope.mixData = function(){
$scope.model.pets = $scope.myPets;
};
});
</script>
It's much better if you use select as angular standards ng-options with this attribute you can handle everything in your view and multiple type return array to your controller as {id: n}
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.model = {};
//from api
$scope.arrayFromApi = [{
id: 1,
name: 'test'
},
{
id: 2,
name: 'test2'
}
];
$scope.getDetails = function() {
console.log($scope.model);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="model.name" placeholder="Put your name..." />
<input type="text" ng-model="model.age" placeholder="Put your age..." />
<!--Select pets for model person-->
<select ng-model="model.pets" ng-options="{id: item.id} as item.name for item in arrayFromApi" multiple></select>
<button ng-click="getDetails()">save</button>
</div>
I currently have a modal form setup and working nicely how i want it but now i need to grab the information inputed into textboxes and selections by the user and im sort of lost as to where i need to start. below is the code for my modal form in entirity. I'm not necessarily looking for a direct answer but to be pointed in the right direction of more information though examples would be greatly appreciated.
<div ng-app='plunker' ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>Create a new post</h3>
</div>
<form name="modalForm">
<div class="modal-body">
<div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" placeholder="Post Title" required/><br>
<textarea name="modalInput" class="form-control" rows="10" maxlength="1000" form="modalForm" ng-model="data.myNumber2" placeholder="Post Body" required></textarea><br>
<label for="sel1">Select category:</label>
<select name="modalInput" class="form-control" ng-model="data.myNumber3" id="sel1" required>
<option value="" selected disabled>Please select</option>
<option value='lifestyle'>lifestyle</option>
<option value='travel'>travel</option>
<option value='video'>video</option>
</select><br>
<input name="modalInput" type="url" class="form-control" size="10" ng-model="data.myNumber4" placeholder="http://www.postUrlHere.com"/>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-disabled="modalForm.$invalid" ng-class="{ 'disabled': modalForm.$invalid }" ng-click="ok()">Submit</button>
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</div>
</form>
</script>
<h1>GWAT Websites and Designs</h1>
<button class="btn" ng-click="open()">Submit new post</button>
</div>
<script>
var myMod = angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $uibModal, $log) {
$scope.items = ['title', 'body', 'category', 'url'];
$scope.open = function() {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
edit:
var ModalInstanceCtrl = function($scope, $uibModalInstance, data) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function() {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
};
myMod.controller('ModalDemoCtrl', ModalDemoCtrl);
myMod.controller('ModalInstanceCtrl', ModalInstanceCtrl);
</script>
If you are looking to send the $scope.data from the current page to a modalInstance, you will have to add a property to the resolve object.
$scope.open = function() {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
data: function() {
return $scope.data;
}
}
});
From the ModalInstanceCtrl, add "data" as a dependency, and you will be able to retrieve the relevant data.
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>