I need, based on an in page variable, to change value of a binding element.
Here it is the in page var:
<script type="text/javascript">
var myVar = 'value1';
</script>
This is the select with the bind element:
<select value="">
<option ng-repeat="value in valueList">
{{myNewValue()}}
</option>
</select>
Here is the controller:
$scope.inPageVar = $window.myVar;
$http.get(jsonUrl).then(function(result) {
$scope.valueList = result.data.valueList;
$scope.myNewValue = function() {
return $scope.valueList[0].additional + $scope.inPageVar;
};
});
Here the JSON structure:
"valueList": [
{
"additionnal": {
"value1": "this is value 1",
"value2": "this is value 2"
}
},
{
"additionnal": {
"value1": "this is value 3",
"value2": "this is value 4"
}
}
]
I would like to know how to concatenate the in-page var value with the element of the get function.. Thank you!
(function() {
angular.module("CombineModule", []).controller('MyController', function() {
this.values = [{
"additional": {
"value1": "this is value 1",
"value2": "this is value 2"
}
}, {
"additional": {
"value1": "this is value 3",
"value2": "this is value 4"
}
}];
this.myNewValue = function(index) {
return this.values[index].additional[myVar];
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="CombineModule">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var myVar = 'value1';
</script>
</head>
<body ng-controller="MyController as v">
<select value="">
<option ng-repeat="value in v.values">
{{v.myNewValue($index)}}
</option>
</select>
<script src="app.js"></script>
</body>
</html>
If you want to expose myVar globally,
write window.myVar = 'some value' instead of var myVar = 'someval'.
Or if you want to make this available into $rootScope.myVar = 'some value'
Then in your logic,
return $scope.valueList[0].additional[window.myVar];
Related
Please help me with the below code. I have created this so that anyone can make changes and give me a solution.
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="continent in destinations">
<input type="checkbox" ng-model="continent.selected" ng-change="parentChange($index)"> {{continent.name}} ({{continent.countries_selected}}
/ {{continent.countries.length}}) - {{continent.all_selected}}
<ul>
<li ng-repeat="country in continent.countries">
<input type="checkbox" ng-model="country.selected"> {{country.name}} </li>
</ul>
</li>
</ul>
<p>You have selected: {{total_selected}} Countries in Total</p>
</body>
</html>
Controller
app.controller('MainCtrl', function($scope) {
$scope.total_selected = 0;
$scope.$watch('destinations', function(destinations){
var total_selected = 0;
angular.forEach(destinations, function(continent){
continent.countries_selected = 0;
angular.forEach(continent.countries, function(country){
total_selected += country.selected ? 1 : 0
continent.countries_selected += country.selected ? 1 : 0
if (continent.countries_selected == continent.countries.length) {
continent.selected = true;
} else {
continent.selected = false;
}
});
});
$scope.select_all = function(continent){
continent.selected = true;
}
$scope.total_selected = total_selected;
}, true);
$scope.select = function(continent){
console.log(continent)
continent.selected = true;
}
$scope.parentChange = function(index) {
angular.forEach( $scope.destinations[index].countries, function(country) {
country.selected = $scope.destinations[index].selected;
});
};
$scope.destinations = [
{
"name": "India",
"countries": [
{
"name": "Mumbai"
},
{
"name": "Delhi"
},
{
"name": "Calicut"
}
]
},
{
"name": "America - US",
"countries": [
{
"name": "New York"
},
{
"name": "Canada"
},
{
"name": "Miami"
},
{
"name": "Hackensack"
}
]
}
];
});
Fiddle Link
What I want to do is:
For Ex: If I select a child node (Delhi) then the parent node (India) should be checked automatically.
In other words, any child node checked should immediately check the parent node and vice-versa
Thanks,
Kimz.
It's a pretty simple change, right now you're watching the collection for changes and doing this inside of it
if (continent.countries_selected == continent.countries.length) {
continent.selected = true;
} else {
continent.selected = false;
}
Whereas what you really want is if at least 1 country is selected for that continent to be selected, so just change it to
if (continent.countries_selected > 0) {
continent.selected = true;
} else {
continent.selected = false;
}
Fiddle For Example
I am using angularjs. I have sample list of json. I am display the list using ng-repeat and I have checkbox in html.
I need to find user checkbox is clicked or not(not checked or not).
Here's a working example:
var app = angular.module('MyApp', []);
app.controller('MainCtrl', function($scope) {
$scope.result = {};
$scope.result.name = 'World';
var data = '[ { "button": 1, "name": "Test-1", "checked" : 0 }, { "button": 2, "name": "Test-2", "checked" : 0 }, { "button": 3, "name": "Test-3", "checked" : 1 }, { "button": 4, "name": "Test-4", "checked" : 0 }, { "button": 5, "name": "Test-5", "checked" : 1 } ]';
$scope.result.list = JSON.parse(data);
});
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<div ng-app="MyApp" ng-controller="MainCtrl">
<p>Hello {{name}}!</p>{{result.list.name}}
<ul>
<li ng-repeat="list in result.list">
<input type="checkbox" ng-model="list.isChecked" ng-checked="list.checked == 1">- {{list.name}}</li>
</ul>
</div>
Expected output:
Find user clicked the checkbox or not.
If checkbox already checked (3 & 5). If user unchecked means I need to identify.
Alternatively, here's a Plunker.
As far as I understood, You want to check if the checkbox was clicked by user or not. Check out the below code changes or on Plunker
This code adds, isClicked attribute to the check-boxes that were clicked. Also it stores the current value of check-boxes in checked attribute.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.result = {};
$scope.result.name = 'World';
var data = '[ { "button": 1, "name": "Test-1", "checked" : 0 }, { "button": 2, "name": "Test-2", "checked" : 0 }, { "button": 3, "name": "Test-3", "checked" : 1 }, { "button": 4, "name": "Test-4", "checked" : 0 }, { "button": 5, "name": "Test-5", "checked" : 1 } ]';
$scope.result.list = JSON.parse(data);
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>{{result.list}}
<ul>
<li ng-repeat="list in result.list">
<input type="checkbox" ng-model="list.checked" ng-click="list.isClicked = true" ng-true-value="1" ng-false-value="0">- {{list.name}}</li>
</ul>
</body>
</html>
I have a simple angular dropdown like bellow:
<select class="form-control" ng-model="docPropIdentityModel.OwnerLevel"
ng-options="ownerLevel as ownerLevel.LevelName for ownerLevel in ownerLevels track by ownerLevel.OwnerLevelID">
<option value="">--Select--</option>
</select>
I've a value for OwnerLevelID, I want to assign the OwnerLevelID as the value of the dropdown & show the respective LevelName. I can easily do this by using jquery but want to do it the angular way.
I tried to assign the value for the model like bellow:
$scope.docPropIdentityModel.OwnerLevel = "123456";
But it didn't work. How it can be done?
As you are using track by expression, You need to set the OwnerLevelID property of object associated with ngModel.
$scope.docPropIdentityModel.OwnerLevel = { OwnerLevelID : "123456"};
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script>
angular.module("myapp", [])
.controller("MyController", function ($scope) {
$scope.register = {};
$scope.register.countryId = "4";
$scope.register.countries = [{
id: "1",
name: "India"
}, {
id: "2",
name: "USA"
}, {
id: "3",
name: "UK"
}, {
id: "4",
name: "Nepal"
}];
});
</script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController">
<div>
Country Name : <select ng-model="register.countryId" ng-options="country.id as country.name for country in register.countries"></select>
</div>
<div>
Country-Id : {{register.countryId}}
</div>
</div>
</body>
</html>
I am trying to get my extended Kendo Widget to work with AngularJS.
With Kendo only my extended widget works fine you will see from the code below, but with Angular it wouldn't.
This is my code:
http://dojo.telerik.com/AbeZO/7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo Menu Extended</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
<script>
(function ($) {
var MyMenu = window.kendo.ui.Menu.extend({
init: function (element, options) {
window.kendo.ui.Menu.fn.init.call(this, element, options);
},
options: {
name: "MyMenu",
},
extendedFunctionality: function() {
return "extended functionality";
}
});
kendo.ui.plugin(MyMenu);
alert('menu extended');
})(jQuery);
</script>
</head>
<body>
<div ng-app="app" ng-controller="MyCtrl">
<p>Telerik Menu with Angular</p>
<ul kendo-menu k-data-source="menuData" k-rebind="menuData"></ul>
<p>My extended Menu with Angular</p>
<ul kendo-my-menu k-data-source="menuData" k-rebind="menuData"></ul>
</div>
<p>My extended menu with Kendo only</p>
<ul id="kendomymenu"></ul>
<script>
$("#kendomymenu").kendoMyMenu({
dataSource: [
{
text: "Item 4",
},
{
text: "Item 5",
},
{
text: "Item 6",
}
],
select: function () {
alert(this.extendedFunctionality());
},
});
angular.module("app", [ "kendo.directives" ]).controller("MyCtrl", function($scope){
$scope.menuData = [
{
text: "Item 1",
},
{
text: "Item 2",
},
{
text: "Item 3",
}
];
})
</script>
</body>
</html>
How to get it to work?
The menu is special cased by widget name and that's why its data source isn't assigned. You better create a custom directive for that:
.directive("kendoMenuDirective", function() {
return {
restrict: "A",
link: function(scope, element, attr) {
var dataSource = scope.$eval(attr.kDataSource);
$(element).kendoMyMenu({
dataSource: dataSource
});
}
};
});
Here is an updated version of your demo: http://dojo.telerik.com/#korchev/uNiDe
I have one dropdown for country, another dropdown for cities and an autocomplete textbox for places.
When I select country in the first dropdown it shows cities list for that particular country in the second dropdown.
Next I want to show the places list under the selected city in the autocomplete textbox.
I have one local JSON file, html page and JavaScript file. The HTML code goes as follows:
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript" src="js/json4update.js">
< script type = "text/javascript"
src = "js/textauto.js" >
</script>
</head>
<body>
<div ng-controller="MyController">
<select ng-model="Countryselected" ng-options=" coun.country for coun in country" ng-change="getCity()">
<option value="">Select</option>
</select>
<select ng-model="cityselect" ng-options=" c.name for c in Citydetails " ng-disabled="!Countryselected">
<option value="">Select</option>
</select>
<input id="tags" ng-model="placeselected" ng-keyup="complete()" placeholder="Type place name" ng-disabled="!cityselect" />
</div>
</body>
</html>
Here goes my .js file, here is the problem I guess. I am not able to use JS function on required place.
var app = angular.module('myApp', []);
app.controller('MyController', function ($scope, $http) {
$http.get("file2update.json").success(function (data) {
$scope.country = data.records;
$scope.getCity = function () {
$scope.Citydetails = $scope.Countryselected.cities;
$scope.places = $scope.cityselect.place;
}
});
$scope.complete = function ()
{
$("#tags").autocomplete({
source: $scope.placeselected
});
}
});
Here is my JSON file .
{
"records": [{
"cities": [{
"name": "patna",
"place": [
"p1",
"p2",
"p3"]
}, {
"name": "delhi",
"place": [
"d1",
"d2"]
}],
"country": "india"
}, {
"cities": [{
"name": "Australia1",
"place": [
"A1",
"A2",
"A3"]
}, {
"name": "Australia2",
"place": [
"a11",
"a22",
"a33"]
}],
"country": "Australia"
}]
}