Problem Question -
I have a two drop down in my view. And second drop down rely on the first one. But somehow second one does not get updated
// my firstdrop down
<select ng-controller="myController"
ng-options="customer.name for customer in customerDetailData" ng-model="customer"
ng-change="updateCost(customer)">
<option value="">Please select customer</option>
</select>
// my second drop down
<select ng-controller="myController"
ng-options="cc.name for cc in customerCostData">
<option value="">Please select cost</option>
</select>
// my controller
(function() {
var myController = function($scope,Service){
$scope.customerDetailData;
Service.cust()
.success(function(data){
console.log(data)
$scope.customerDetailData = data;
})
.error(function(status,error){
})
$scope.customerCostData;
$scope.updateCost=function(customer){
Service.cost(customer.id)
.success(function(cost){
$scope.customerCostData= cost
})
.error(function(status,data){
console.log(status);
console.log(data);
})
}
};
myController .$inject = ['$scope','Service'];
angular.module('app').controller('myController ',myController );
}());
Is anything i am missing ? the data is coming through fine in the console. Please guide me
There are 2 things to do here:
The first and main issue is that you are attaching ng-controller to each select individually. This means it is actually creating 2 separate controllers, one for each select, and so they are given different scopes. You need to apply the ng-controller attribute to a parent element, such as the form.
The second issue is that angular will not automatically update an element just because the scope variable is used in ng-options. You therefore need to give it a ng-model so that Angular watches it correctly.
Here is an example of the code with two separate controller instances. Note the 2 alerts:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<form ng-app="myApp">
<select ng-controller="myController"
ng-options="customer.name for customer in customerDetailData" ng-model="customer"
ng-change="updateCost(customer)">
<option value="">Please select customer</option>
</select>
<select ng-controller="myController"
ng-options="cc.name for cc in customerCostData" ng-model="customercustomerCostData">
<option value="">Please select cost</option>
</select>
</form>
<script type="text/javascript">
(function () {
var myApp = angular.module('myApp', []);
var myController = function ($scope) {
alert('myController created');
$scope.customerDetailData = [{ id: 1, name: "bob" }, { id: 2, name: "fred" }];
$scope.updateCost = function (customer) {
$scope.customerCostData = [{ name: customer.id.toString() }, { name: 'x' }];
}
};
myController.$inject = ['$scope'];
myApp.controller('myController', myController);
}());
</script>
Here it is with the single ng-controller applied to the form and ng-model="customerCostData" on the second select, so it now works:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<form ng-app="myApp" ng-controller="myController">
<select
ng-options="customer.name for customer in customerDetailData" ng-model="customer"
ng-change="updateCost(customer)">
<option value="">Please select customer</option>
</select>
<select
ng-options="cc.name for cc in customerCostData" ng-model="customercustomerCostData">
<option value="">Please select cost</option>
</select>
</form>
<script type="text/javascript">
(function () {
var myApp = angular.module('myApp', []);
var myController = function ($scope) {
alert('myController created');
$scope.customerDetailData = [{ id: 1, name: "bob" }, { id: 2, name: "fred" }];
$scope.updateCost = function (customer) {
// would be an ajax call
$scope.customerCostData = [{ name: customer.id.toString() }, { name: 'x' }];
}
};
myController.$inject = ['$scope'];
myApp.controller('myController', myController);
}());
</script>
is the cost data the result of an Ajax request? if so, you may need to force a force a $digest cycle to let the UI know the model has been changed. You can achieve this by wrapping the assignment of cost in a $timeout, or $apply.
$timeout(function () {
$scope.customerCostData = cost;
});
or
$scope.$apply(function () {
$scope.customerCostData = cost;
});
Related
Am trying to populate combo box in AngularJS. Below is the controller code.
var app = angular.module('app');
app.controller('roadmap', function($rootScope, $scope, $http, $q, leFactory) {
$rootScope.activityInfoList=[];
$rootScope.brand_strategy_list=[];
$rootScope.brand_strategy_csf=[];
$rootScope.brand_strategy_initiatives=[];
leFactory.getActivityPopupInfo().then(function(activityList) {
$rootScope.activityInfoList=angular.copy(activityList);
console.log($rootScope.activityInfoList);
$rootScope.brand_strategy_list=$rootScope.activityInfoList.listBrandStrategy;
console.log($rootScope.brand_strategy_list);
console.log('editActivityPopup service accepted-> ');
}, function(error) {
console.log('editActivityPopup service rejected-> ', error);
});
$rootScope.items = [{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
});
In the HTML part, am trying to populate $rootScope.brand_strategy_list as below.
<select ng-model="activityInfoList.brandStrategy" class="selectpicker" data-style="btn-inverse" style="display: none;" ng-options="item.strategyName as item.strategyName for item in brand_strategy_list">
<option> Select </option>
</select>
$rootScope.brand_strategy_list is not getting populated. But when I tried populating $rootScope.items, it is getting populated. I made console.log($rootScope.brand_strategy_list) and its showing the complete list.
Dont know what mistake am doing? Pls help me solve this issue. Thanks in Advance.
Try this
ng-options="item.strategyName as item.strategyName for item in $root.brand_strategy_list
Remove style="display: none;" from html and change $rootScope to $scope
<select ng-model="activityInfoList.brandStrategy" class="selectpicker" data-style="btn-inverse" ng-options="item.strategyName as item.strategyName for item in brand_strategy_list">
<option> Select </option>
</select>
I do not understand why ng-options is not populating the dropdown menu. JSON data is being returned from the service. I can console.log the data in the controller. So, why is ng-options not populating the dropdown
<tr class="info">
<td class = "col-xs-3">Maximum page size: </td>
<td class = "col-xs-9" ng-controller = "converseController"> Show conversations per page
<select ng-model = "selectedNumber" ng-options="conversation for conversation in conversations">
<option value = ""> Choose the number of conversations </option>
</select>
<aside id = "pageSize"> Show contacts per page
<select>
<option> 20 </option>
</select>
</aside>
</td>
</tr>
converse.js - Controller
(function() {
'use strict';
var converseController = function (getData, $scope) {
var url = '../../data/conversation.json';
getData.fetchData(url)
.then(function(data){
$scope.coversations = data.conversation;
console.log($scope.coversations);
});
};
angular.module('assignment3App')
.controller ('converseController', ['getData', '$scope', converseController]);
}());
conversation.json
{
"conversation": [
10,
20,
30,
40,
50,
60,
70,
80,
90,
100
]
}
Service - promise.js
(function() {
'use strict';
var getData = function (fetchDataService) {
this.fetchData = function(filePath) {
return fetchDataService.getContent(filePath)
.then(function (returnedData) {
return returnedData.data;
});
};
};
angular.module('assignment3App')
.service ('getData', ['fetchDataService', getData]);
}());
Service - callJson.js
(function() {
'use strict';
var fetchDataService = function($http) {
this.getContent = function(path) {
return $http({
method : 'get',
url : path
});
};
};
angular.module('assignment3App')
.service ('fetchDataService', fetchDataService);
}());
You are assinging the array to the wrong scope variable. $scope.coversations = data.conversation; should be spelt $scope.conversations = data.conversation;.
var app = angular.module("myApp", ['ngRoute', 'ngSanitize']);
app.controller('landingPageController', function($scope) {
$scope.countries = [{
name: "India",
Id: "1"
}, {
name: "Nepal",
Id: '2'
}];
});
I have same filter criteria on two diff. pages in angular, So I have used single controller with 2 routes, and two diff. html for filter part. I need if i select any country on home page, the same selection should be reflected to the about page(instead of again select same country) . I mean it should be common filter across 2 page not individual.
Here is url: http://plnkr.co/edit/VMYYBDy4doWCzUa4d6Uq?p=preview
need help to sort it out...
You can share data between different controllers (or different instances of same controller) using e.g. services. So in your scotchApp (sounds tasty, BTW!) you could have something like
scotchApp.service('countryService', function() {
var current;
return {
// set selected country
set: function(country) {
current = country;
console.log('set', current);
},
// get selected country
get: function() {
console.log('get', current);
return current;
}
};
});
And your mainController as
scotchApp.controller('mainController', function($scope, countryService) {
$scope.countries = [{
name: 'India',
id: 1 // note the property casing here
},{
name: 'Nepal',
id: 2
}];
// get selected country
$scope.selectedCountry = countryService.get();
// set selected country
$scope.set = function(country) {
countryService.set(country);
};
});
And the template for your routes
<div>
<select ng-options="country.name for country in countries track by country.id"
ng-model="selectedCountry"
ng-change="set(selectedCountry)">
<option value="">Select country</option>
</select>
</div>
That should do it.
I have two Models named "Jeans" and "Shirts"
which have two variables "name" and "color"
I want to have a search page in which user can search through database to find shirts and jeans in specific color or name.
This link might be a hint but I just could not figure it out
Similar Problem
I have got something here But it does not work.
I appreciate if you tell me how to fix it.Thanks!
View
<section data-ng-controller="AllsController" data-ng-init="find()">
<div class="page-header">
<h1>Alls</h1>
</div>
<div class="Search">
<h2>Search Section</h2>
<select data-ng-model="search1" id="search">
<option value="Model1">Jeans</option>
<option value="Model2">Shirts</option>
</select>
<select data-ng-model="search2" id="search">
<option value="Model1">Jeans</option>
<option value="Model2">Shirts</option>
</select>
<select data-ng-model="variable1" id="variable1">
<option selected="selected">AnyThing</option>
<option value="color1">Blue</option>
<option value="color2">Red</option>
</select>
<select data-ng-model="variable2" id="variable2">
<option selected="selected">AnyThing</option>
<option value="name1">John</option>
<option value="name2">Bob</option>
</select>
</div>
<br></br><br></br>
<h2>Result Section</h2>
<div class="list-group">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="all in alls">
<td data-ng-bind="all.name"></td>
<td data-ng-bind="all.color"></td>
</tr>
</tbody>
</table>
</div>
In controller; first I see which properties user has selected and assign it to FindArray
Then I see in which model user want to search.(AnyThing means that user has not selected anything)
Server Side Controller
exports.list = function(req, res) {
if (variable1 === "AnyThing")
{
if (variable2 === "AnyThing")
{
FindArray = {};
}else
{
FindArray = { name = variable2 };
}
}else
{
FindArray = { color = variable1 , name = variable2 };
}
if (req.body.search1 === 'Jeans')
{
if (req.body.search2 === 'Shirts')
{
Jeans.find(FindArray).sort('-created').populate('user', 'displayName').exec(function(err, jeans) {
Shirt.find(FindArray).sort('-created').populate('user', 'displayName').exec(function(err, shirts) {
var all = shirts.concat(jeans);
res.jsonp(all);
});
});
}else{
Jeans.find(FindArray).sort('-created').populate('user', 'displayName').exec(function(err, jeans) {
res.jsonp(jeans);
});
}
}else{
Shirt.find(FindArray).sort('-created').populate('user', 'displayName').exec(function(err, shirts) {
res.jsonp(shirts);
});
}
};
$Resource Service:
angular.module('alls').factory('Alls', ['$resource',
function($resource) {
return $resource('alls/:allId', { allId: '#_id'
}, {
update: {
method: 'PUT'
}
});
}]);
Client Side Controller
angular.module('alls').controller('AllsController', ['$scope', '$stateParams', '$location', 'Authentication', 'Alls', 'Jeans', function($scope, $stateParams, $location, Authentication, Alls, Jeans) {
$scope.find = function() {
$scope.search1 = search1;
$scope.search2 = search2;
$scope.variable1 = variable1;
$scope.variable2 = variable2;
$scope.alls = Alls.query();
};
}]);
Server Side Route
module.exports = function(app) {
var alls = require('../../app/controllers/alls.server.controller');
app.route('/alls').get(alls.list);
};
Preliminary review of this looks to me like your route is expecting a get, but your $resource is running a put. I'm also thinking that all of your scope assignments aren't going to work because you're assigning non existent variables.
I am using Angularjs and I have a dropdown box that lists several items. If the item the user needs is not in the list I need to allow the user to enter the data. Is this possible? How would I do it?
Try this out
Working Demo
html
<div ng-app="myapp">
<fieldset ng-controller="FirstCtrl">
<select ng-options="p.name for p in people" ng-model="selectedPerson"></select>
<br>
Name:<input type="text" ng-model="name"/>
<button ng-click="add(name)">Add</button>
</fieldset>
</div>
script
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
$scope.people = [{
name: 'John'
}, {
name: 'Rocky'
}, {
name: 'John'
}, {
name: 'Ben'
}];
$scope.add = function(value)
{
var obj= {};
obj.name = value;
$scope.people.push(obj);
$scope.name = '';
}
});
You seem to want something like a tagging widget. Maybe looking at angular-tags you can accomplish what you want