This is a simple html code and it is working fine. Now I have an AngularJS array and I can access and bind variables like $scope.ID or $scope.text which is working fine. But how can I bind values, to $scope.articles array. with relevant values.
For example
If i change the value of f0, (just example it is not working) $scope.articles.[0].betrag_gnetto value should change
If i change the value of f1, (just example it is not working) $scope.articles.[1].betrag_netto value should change
HTML Code (I have created these field through ng-repear loop)
<input type="text" ng-model="betrag_netto0" id="f0">
<input type="text" ng-model="betrag_netto1" id="f1">
<span ng-bind="betrag_netto0"></span>
<span ng-bind="betrag_netto1"></span>
AngularJS Array looks like
{
"isInternalInvoice":1,
"name":"Rechnung",
"ID":"5cd45e86",
"text":null,
"countArticles":2,
"articles":[
{
"ID":"130.123",
"betrag_netto":"123987"
},
{
"ID":"131.123",
"betrag_netto":"1"
}
]
}
Create input fields corresponding to the objects present in the articles array using ng-repeat and this will make it two way binding.
var app = angular.module('plunker', []);
app.controller('ApplicationController', function($scope) {
$scope.obj = {
"isInternalInvoice": 1,
"name": "Rechnung",
"ID": "5cd45e86",
"text": null,
"countArticles": 2,
"articles": [{
"ID": "130.123",
"betrag_netto": "123987"
}, {
"ID": "131.123",
"betrag_netto": "1"
}]
};
});
<!doctype html>
<html ng-app="plunker">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
</head>
<body>
<div class="container" ng-controller="ApplicationController">
<div class="row" ng-repeat="article in obj.articles">
<input type="text" ng-model="article.betrag_netto" id="f{{$index}}"> <span ng-bind="article.betrag_netto"></span> </div>
</div>
</body>
</html>
try $scope.articles[0].betrag_gnetto
It works
Related
I am trying to substitute, the drop down options "Yes/No" to true and false so that I can make usage of ng-hide to make the appearance of an input field dynamic. But the binding is not working as desired. Please check the JS bin link https://jsbin.com/piteqoduba/1/edit?html,output and advise.
<div ng-app="myApp" ng-controller="myCtrl">
<p>Delivery to same address?</p>
<ng-int="selectedVal={range.value}"></ng-int>
<select ng-model="selectedVal" ng-options="range.display for range in range" >
</select>
<p ng-hide= "selectedVal" >Fill your address below.</p>
<input type="text" ng-hide = "selectedVal">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.range = [{display: "yes", value:true},
{display: "no", value: false}
];
});
</script>
Substitute
ng-options="range.display for range in range"
with
ng-options="range.value as range.display for range in range"
This will display Yes/No in dropdown while the values will be true/false.
You will get an object in model so you have to do something like
<input type="text" ng-hide = "selectedVal.value">
Here is working fiddle
Try this. Actually you are using selected object for ng-hide="selectedVal". selectedVal is Object. That's a problem. You want true or false. So ng-hide="selectedVal.value" is correct.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Delivery to same address?</p>
<ng-int="selectedVal={range.value}"></ng-int>
<select ng-model="selectedVal" ng-options="range.display for range in range" >
</select><p>{{selectedVal}}</p>
<p ng-hide="selectedVal.value" >Fill your address below.</p>
<input type="text" ng-hide="selectedVal.value">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.range = [{display: "yes", value:true},
{display: "no", value: false}
];
});
</script>
</body>
</html>
As shown below, in the controller.js, I have tried to use the { name: 'item' } style and it worked in the viewer.
However, I would like to pull the data from the SQL Database.
I tried using {{member.member_name}} but it didn't work.
$http.get('../crud/members_select.php').then(function(response){
$scope.members = response.data;
});
this.items = [
{ member_name: 'Tim' },
{ member_name: 'Dave' },
{ member_name: 'Jenny' }
];
Thus, my question is "How can I do the {{member_name}} thing in order to repeat the data in a single code from SQL Database?"
Below is the HTML CODE.
<div class="ibox-content">
<select ng-options="name as member.member_name for n in members"
multiple
ng-model="selections"
bs-duallistbox></select>
</div>
Thank you in advance!!
You need to do it this way
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="https://code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="selectExample">
<script>
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.items = [
{ member_name: 'Tim' },
{ member_name: 'Dave' },
{ member_name: 'Jenny' }
];
$scope.selections = [];
}]);
</script>
<div ng-controller="ExampleController">
<label>Color (null not allowed):
<select ng-model="selections" ng-options="item.member_name for item in items" multiple></select>
</label>
<hr/>
Currently selected: {{ selections }}
</div>
</body>
</html>
How can I create dynamic ng-models in Angular? I tried but I think I'm having a hard time getting it to run. All I get is undefined. Here's my code.
<input type="text" class="form-control input-sm" ng model="teller[value.teller_id]" value="<% value.mac_address %>">
I am planning to have a ng-model that has the same name but only changes by number. I have an object that holds the number from 1-4. which is value.teller_id. I want to append it to the ng-model as teller1,teller2,teller3 (teller[value.teller_id] etc.. It is looped by ng-repeat which I don't have any problem but rather creating the dynamic ng-model and changing the number will yield undefine.
ng model="teller[value.teller_id]" <---- doesn't work
I want to achive teller1, teller2 etc..
Thanks!
Yes. We can generate ng-model name dynamically.
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.teller = {};
$scope.name = [{
"id":1
},{
"id":2
}]
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="x in name">
<input type="text" ng-model="teller[x.id]" />
</div>
<pre>{{teller | json}}</pre>
</body>
</html>
Hope it works for your case :)
I'm populating a dropdown list from an object. I want to set the related model value as binded object's "text". But also I have to send a parameter (binded object's value) for a function. I can do this. But Model's value is getting all the object. I want only get the object's Text.
var app = angular.module("App", []);
app.controller("Controller", function($scope) {
$scope.list = [{
"Text": "75.000",
"Value": 1
}, {
"Text": "100.000",
"Value": 2
}, {
"Text": "150.000",
"Value": 3
}, {
"Text": "250.000",
"Value": 4
}];
$scope.GetVal = function(val) {
alert(val);
};
});
<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body ng-controller="Controller">
<select ng-model="model" ng-options="item as item.Text for item in list" ng-change="GetVal(model.Value)">
</select>
<pre>
my model: {{model}}
</pre>
</body>
</html>
My Codes as seen below. Can you help please?
As per my understanding I have updated the cod please check and let me know if this is what u need.
<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<script src="script.js"></script>
<title></title>
</head>
<body ng-controller="Controller">
<select ng-model="model" ng-options="item as item.Text for item in list" ng-change="GetVal(model)">
<option value= "" disabled="">select value</option>
</select>
<pre>
my model: {{model.Text}}
</pre>
</body>
</html>
// Code goes here
var app = angular.module("App", []);
app.controller("Controller", function($scope) {
$scope.list = [{
"Text": "75.000",
"Value": 1
}, {
"Text": "100.000",
"Value": 2
}, {
"Text": "150.000",
"Value": 3
}, {
"Text": "250.000",
"Value": 4
}];
$scope.GetVal = function(val) {
alert(val.Value);
};
});
Basar,
You will need to change the ng-repeat as below
<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<script src="script.js"></script>
<title></title>
</head>
<body ng-controller="Controller">
<select ng-model="model" ng-options="item as item.Value for item in list" ng-change="GetVal(model)">
<option value= "" disabled="">select value</option>
</select>
<pre>
my model: {{model.Value}}
</pre>
</body>
</html>
sen,
Do you wish to bind only Text to your model? or Text and Value both?
If you only wish to bind Text, please check updated plnk.
I know, this is an old question.
I'm trying to ng-repeat over 'cols' as a starting point. But I'm getting an error when trying to consume this JSON
{
"cols":["id","name","type"],
"rows":[
["284","JAMES DEAN","Employee"],
["243","Brian J Adamms","Employee"],
["237","Test Account","Brokerage Account"],
["241","Robert Borkman","guest"]
]
}
The error appears to be in the angularJS file, but Im sure the problem is elsewhere.
Error: a.push is not a function
W#http://127.0.0.1/js/lib/angular.min.js:10
g#http://127.0.0.1/js/lib/angular-resource.min.js:7
u/</g[b]/</<#http://127.0.0.1/js/lib/angular-resource.min.js:8
o#http://127.0.0.1/js/lib/angular.min.js:7
u/</g[b]/<#http://127.0.0.1/js/lib/angular-resource.min.js:8
Rc/e/g.promise.then/i#http://127.0.0.1/js/lib/angular.min.js:79
Rc/e/g.promise.then/i#http://127.0.0.1/js/lib/angular.min.js:79
Rc/f/<.then/<#http://127.0.0.1/js/lib/angular.min.js:79
e.prototype.$eval#http://127.0.0.1/js/lib/angular.min.js:91
e.prototype.$digest#http://127.0.0.1/js/lib/angular.min.js:89
e.prototype.$apply#http://127.0.0.1/js/lib/angular.min.js:91
f#http://127.0.0.1/js/lib/angular.min.js:100
B#http://127.0.0.1/js/lib/angular.min.js:103
ad/</p.onreadystatechange#http://127.0.0.1/js/lib/angular.min.js:105
Here is a "plunker" example - run console - you'll see the same error I'm getting - and the JSON shows as an empty array.
http://plnkr.co/edit/QgNkvsOIVzrpUp5pP02p?p=preview
Thank you all for help
I don't think the error is in angular source, and it will handle that JSON just fine: http://plnkr.co/edit/knJQ0S?p=preview
Im able to get what problem you are facing see the below code
<html ng-app="myapp" >
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="Scripts/Angular.js"></script>
</head>
<body >
<div ng-controller="TestCtrl" >
<div ng-repeat="data in data.cols">
{{data}}
</div>
</div>
<script>
var myapp = angular.module('myapp', []);
function TestCtrl($scope, $http,$timeout) {
$scope.data = {
"cols": ["id", "name", "type"],
"rows": [
["284", "JAMES DEAN", "Employee"],
["243", "Brian J Adamms", "Employee"],
["237", "Test Account", "Brokerage Account"],
["241", "Robert Borkman", "guest"]
]
};
}
</script>
</body>
</html>