On Select/Option onchange() event it should write the value of the JSON file as an angular expression to test ID div.
However it writes like it's just a string: {{names[1].thnev}}
(And if I put this manually into the ID div, it works.)
Can you help me what did I miss? (In the last 4 hours...)
Thank you.
<div ng-app="myApp" ng-controller="customersCtrl">
<select id="thaz" name="thaz" class="selectbox" onchange="onChange(this.value)">
<option ng-repeat="x in names" value="{{x.id}}">{{x.id}} - {{x.thnev}}</option>
</select>
<div id="list"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("al_list_th.php")
.then(function (response) {$scope.names = response.data.records;});
});
function onChange(value) {
document.getElementById("list").innerHTML = "{{names[" + value + "].thnev}}";
}
</script>
We can use the built-ins that AngularJS has available to simplify the problem.
In this case, we can use ngModel to bind the value of the select into a variable that we can use in our template. Let's call this variable selectVal.
Then, we can write {{names[selectVal].thnev}} directly inside of the div that we want this output to live in.
I've put together this example to show the changes:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.selectVal = "default";
$scope.names = [{id: 0, thnev: 5}, {id: 1, thnev: 6} ];
//$http.get("al_list_th.php")
//.then(function (response) {$scope.names = response.data.records;});
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<select id="thaz" name="thaz" class="selectbox" ng-model="selectVal">
<option value="default">None</option>
<option ng-repeat="x in names" value="{{x.id}}">{{x.id}} - {{x.thnev}}</option>
</select>
<div id="list">
{{names[selectVal].thnev}}
</div>
</div>
Note: In my code I added an extra option so that there would be a default as opposed to a blank initial dropdown. You don't have to do this -- the code will work the same without it.
Related
How to pass data from angularjs to javascript
<input type="hidden" ng-model="data.value" id="MyData">
<script>
var MyData = GetEelementById(MyData).value;
</script>
i cant make it work .. , what is the correct way ?
The above piece of code is just part of VIEW only.
You need to go through basic tutorials of AngularJs and understand how views and controllers work.
To be specific, You can access the data (you expecting) in the controller of the view.
Like:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="data.value" id="MyData">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data={
value:"Deepak"
}
});
</script>
Edit as per the discussion in comments on answer
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data={
value:"Deepak"
}
// $scope.data.value is the initial value for the model and view is rendered with this value intially.
//You can also change this value with javascript to reflect in the view as well
//Your post request comes here
// **$scope.data.value reflects the updated Value of Input Box**
});
</script>
I have a Angular JS Application,
<div class="col-lg-12" ng-init="getTableData('{{URL::route('get_repair_category')}}')">
When Page loading the getTableData will execute, but I want to check a variable $rootScope.Dealer and switch the function name of initialization.
Eg : if $rootScope.Dealer value present I wanto execute the function named getDealerData
And If the value is not set need to execute the getTableData function.
How can I make this in anglar js template.
I just tried the ng-if, but its not working...
You can use simple Javascript syntax in ng-init directive like this:
<div class="col-lg-12" ng-init="Dealer ? getDealerData('{{URL::route('get_repair_category')}}') : getTableData('{{URL::route('get_repair_category')}}')">
Here is a plnkr for you (I've changed backend route generation to text):
https://plnkr.co/edit/CJOMT0g50BCWa3j02rcS?p=preview
Try this
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $rootScope) {
$rootScope.dealer = ["a", "b", "c"];
$scope.getTableData = function(x) {
return x;
}
$scope.getDelearData = function() {
return $rootScope.dealer;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-init="data = getDelearData() || getTableData('table data')">
{{data}}
</div>
</div>
I am working on a form having multiple radio button listings in which I will need to create dynamic ng-model for each of the radio button. I am being able to do that, but when same I am trying to retrieve in controller (USING the ng-model iteration with angular forEach loop) it seems model cannot be replicated with console.log. Anyone help?
HTML
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p ng-repeat="x in dummy">
<input type="radio" name="{{x.name}}" id="{{x.id}}" ng-model="Ques[x.id]"><span>{{x.value}}</span>
</p>
<button ng-click="ok()">Click</button>
<script>
//module declaration
var app = angular.module("myApp",[]);
//controller
app.controller("myCtrl", function($scope){
$scope.dummy = [
{name:"name1",value:"red",id:"id1"},
{name:"name2",value:"blue",id:"id2"},
{name:"name3",value:"yellow",id:"id3"},
];
$scope.ok = function(){
angular.forEach($scope.dummy, function(val, key) {
console.log($scope.Ques.val.id);
});
}
});
</script>
</head>
</html>
The Angular model is a JavaScript object itself. Instead of looping through the object, you can output the entire object to the console like this:
console.log( JSON.stringify($scope.dummy) );
To make it more easy to read and span multiple lines for complex objects, just add these arguments to stringify:
console.log( JSON.stringify($scope.dummy, null, 2) );
It also looks like you need a little work on how you handle the Radio buttons, I'll leave that to the excellent odetocode blog/site:
http://odetocode.com/blogs/scott/archive/2013/06/25/radio-buttons-with-angularjs.aspx
The main problem is that you're inside ngRepeat and it creates a child $scope, so to make it work, you should use or the Dot Rule or controller-as-syntax, as below:
$scope.model = {};
Then in your view:
<label>
<input type="radio" id="{{x.id}}" value="{{x.value}}" ng-model="model.Ques[x.id]">{{x.value}}
</label>
See it working:
(function() {
'use strict';
angular
.module('myApp', [])
.controller("myCtrl", function($scope) {
$scope.dummy = [
{
"name":"name1",
"value":"red",
"id":"id1"
},
{
"name":"name2",
"value":"blue",
"id":"id2"
},
{
"name":"name3",
"value":"yellow",
"id":"id3"
}
];
$scope.model = {};
$scope.ok = function() {
// With your original code:
angular.forEach($scope.dummy, function(val, key) {
console.log($scope.model.Ques[val.id]); // <- note the syntax
});
// Or you can get all key / values stored in radio buttons:
/*for (var key in $scope.model.Ques) {
console.log('Key => ', key);
console.log('Value => ', $scope.model.Ques[key]);
}*/
}
});
})();
<!doctype html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p ng-repeat="x in dummy">
<label>
<input type="radio" value="{{x.value}}" id="{{x.id}}" ng-model="model.Ques[x.id]">{{x.value}}
</label>
</p>
<button ng-click="ok()">Click</button>
</body>
</html>
For reference, check the #PankajParkar's answer.
Have a look at that.
<body ng-app="myApp" ng-controller="myCtrl">
<p ng-repeat="x in dummy">
<input type="checkbox" name="{{x.name}}" id="{{x.id}}" ng-model="Ques[x.id]" />
<label>{{x.name}}</label>
</p>
<button ng-click="ok()">Click</button>
<script>
//module declaration
var app = angular.module("myApp",[]);
//controller
app.controller("myCtrl", function($scope){
$scope.dummy = [
{name:"name1",value:"red",id:"id1"},
{name:"name2",value:"blue",id:"id2"},
{name:"name3",value:"yellow",id:"id3"},
];
$scope.Ques = {};
$scope.ok = function(){
angular.forEach($scope.dummy, function(val, key) {
console.log($scope.Ques[val.id]);
});
}
});
I'm trying to display a div if an object is non-empty. Using this answer, Im trying to use angular.equals to check emptyness, but its not behaving as expected
var test = angular.module('test',[]);
test.controller('testCtrl', ['$scope', function($scope){
$scope.foo={};
$scope.bar="bam"
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="testCtrl">
<div ng-show="!angular.equals(foo,{})">{{bar}}</div>
</div>
</div>
The expectation here is that the value of bar will only show if foo is not equal to an empty object. However, foo is clearly set to {} and yet bar still shows.
If you want to access the angular object from templates or expressions, you have to make it available on the scope of where you want to use it. In this case you can put it on the testCtrl's scope.
var test = angular.module('test',[]);
test.controller('testCtrl', ['$scope', function($scope){
$scope.angular = angular;
$scope.foo={};
$scope.bar="bam"
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="testCtrl">
<div ng-show="!angular.equals(foo,{})">{{bar}}</div>
</div>
</div>
I generally put utility objects on $rootScope, so they're available from everywhere.
A cleaner way would be to only add the angular equals method to the $scope:
var test = angular.module('test',[]);
test.controller('testCtrl', ['$scope', function($scope){
$scope.angularEquals = angular.equals;
}
Then you can use the equals method in the template, like:
<div ng-show="!angularEquals(foo,{})">{{bar}}</div>
Your view is looking for a function on the scope, and $scope.angular.equals does not exist. You need to write one like this:
var test = angular.module('test', []);
test.controller('testCtrl', ['$scope',
function($scope) {
$scope.foo = {};
$scope.bar = "bam";
$scope.isEmpty = function(obj) {
return angular.equals(obj,{});
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="testCtrl">
<div ng-hide="isEmpty(foo)">{{bar}}</div>
</div>
</div>
Angular functions can't be used inline, AFAIK.
You could do the equal check with a function inside the controller instead and return the result.
I'm new with AngularJS and I tried this :
<div ng-controller="ctrl1">
<div ng-controller="ctrl2">
<select ng-model="myvar" ng-options="c for c in vars" ></select>
<div>{{myvar}}</div>
</div>
</div>
<script src="js/vendor/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myapp", [])
.controller("ctrl1",function($scope, $rootScope) {
$scope.myvar = 1;
$scope.vars = [1, 2, 3];
$scope.$watch("myvar", function(){
console.log("ctrl1 myvar changed");
});
})
.controller("ctrl2",function($scope, $rootScope) {
$scope.$watch("myvar", function(){
console.log("ctrl2 myvar changed");
});
})
.run();
</script>
When changing the select value, $watch in ctrl1 is never triggered. But if I use an object in $scope and watch its property it works :
<div ng-controller="ctrl1">
<div ng-controller="ctrl2">
<select ng-model="settings.myvar" ng-options="c for c in vars" ></select>
<div>{{settings.myvar}}</div>
</div>
</div>
<script src="js/vendor/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myapp", [])
.controller("ctrl1",function($scope, $rootScope) {
$scope.settings = {
myvar : 1
};
$scope.vars = [1, 2, 3];
$scope.$watch("settings.myvar", function(){
console.log("ctrl1 myvar changed");
});
})
.controller("ctrl2",function($scope, $rootScope) {
$scope.$watch("settings.myvar", function(){
console.log("ctrl2 myvar changed");
});
})
.run();
</script>
Is there a reason for that? What am I doing wrong or what didn't I understand here?
Basically you need to use an object, and not a primitive, in the parent scope and then you will be able to update in the child scope. Hence why your second implementation works and not your first.
If you use a primitive it will make a copy of it within the child scope and therefore your watch statement in your parent controller will never be triggered when a change is fired in the child controller. This jsfiddle demonstrates this behaviour - take a look.
HTML
<div ng-app="myapp">
<div ng-controller="ctrl1">
<select ng-model="myvar" ng-options="c for c in vars" ></select>
<div>{{myvar}}</div>
<div ng-controller="ctrl2">
<select ng-model="myvar" ng-options="c for c in vars" ></select>
<div>{{myvar}}</div>
</div>
</div>
</div>
Javascript
var app = angular.module("myapp", [])
.controller("ctrl1",function($scope, $rootScope) {
$scope.myvar = 1;
$scope.vars = [1, 2, 3];
console.log($scope);
$scope.$watch("myvar", function(){
console.log($scope.myvar);
console.log("ctrl1 myvar changed");
});
})
.controller("ctrl2",function($scope, $rootScope) {
console.log($scope);
console.log($scope.myvar);
console.log($scope);
$scope.$watch("myvar", function(){
console.log($scope.myvar);
console.log($scope.$parent.myvar);
console.log("ctrl2 myvar changed");
});
})
.run();
this works perfectly for me i would need more of the html to diagnose.
.controller('MyCtrl2', ['$scope',function($scope) {
$scope.myvar=1;
$scope.vars=[1,2,3];
$scope.$watch('myvar',function(v){
alert(v);
})
}]);
<select ng-options="value for value in vars" ng-model="myvar"></select>