I'm trying to DRY my html by using ng-repeat. With the following code:
<div class="form-group" ng-repeat="(key, value) in expense">
<label for={{key}} class="col-sm-2 control-label">{{key}}:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id={{key}} ng-model="expense" />
</div>
</div>
The problem I'm having is trying to concatenate to the "expense" in ng-model. I want to add the key.
IE: ng-model="expense.{{key}}" but that doesn't work.
Suggestions?
Thanks!
either you can provide ng-model = value or you can provide ng-model=expense[key]
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.expense = {
cost: 1,
basic: 2
}
});
<!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.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div class="form-group" ng-repeat="(key, value) in expense">
<label for={{key}} class="col-sm-2 control-label">{{key}}:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id={{key}} ng-model="value" />
</div>
</div>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.expense = {
cost: 1,
basic: 2
}
});
<!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.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div class="form-group" ng-repeat="(key, value) in expense">
<label for={{key}} class="col-sm-2 control-label">{{key}}:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id={{key}} ng-model="expense[key]" />
</div>
</div>
</body>
</html>
key in ng-repeat is declared as variable and expense is variable too .. you can not mixed __toString {{}} with variable. You should use expense.key as object or array or depend on type in ng-model.
HTML ID is only html but ng-model have listener and expect variable.
Access to both as variables its good approach.
Related
I am trying to make a To-Do app using AngularJS, but it is saying an error which is related to
Error: $controller:ctrlreg,
the directed link says:
A controller with this name is not registered.
Below is my code with the script.
angular.module('todoApp', [])
.controller('todoController', function($scope) {
$scope.tasks = [];
$scope.add = function() {
$scope.tasks.push($scope.title);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<br>
<div ng-app="todoApp" ng-controller="todoController"><br>
<input ng-model="title"><button ng-click="add()">Add</button>
<br><li ng-repeat="t in tasks">{{t}}</li>
<br>
</div>
check this out : plnkr
index.html :
<!DOCTYPE html>
<html >
<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.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<input ng-model="title"><button ng-click="add()">Add</button>
<br><li ng-repeat="t in tasks">{{t}}</li>
</body>
</html>
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.tasks = [];
$scope.add = function() {
$scope.tasks.push($scope.title);
}
});
This is your code running fine,
angular.module('todoApp', [])
.controller('todoController', function($scope){
$scope.tasks = [];
$scope.add = function() {
$scope.tasks.push($scope.title);
$scope.title = ''
}
})
<!DOCTYPE html>
<html ng-app="todoApp" >
<head>
<meta charset="utf-8" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="app.js"></script>
</head>
<div ng-controller="todoController">
<input ng-model="title"><button ng-click="add()">Add</button>
<li ng-repeat="t in tasks">{{t}}</li>
</div>
</body>
</html>
I'm new for Angular and trying to do one exercise and result is not showing on browser.
(function() {
var app = angular.module('bus', []);
app.controller('BusContorller', function() {
this.busbarnd = basname;
});
var basname = {
name: 'tata',
yearprod: 2000,
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- container -->
<div class="container" ng-app="bus">
<!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<!-- Call controller -->
<div ng-controller="BusContorller as bus">
<p>Bus name : {{bus.busbarnd.name}}</p>
</div>
<!--// Call controller -->
</div>
</div>
<!-- // row end -->
</div>
<!-- // container -->
Kindly let me know what I'm doing wrong. I'm thinking I'm making mistake in calling controller.
Try like below
<!DOCTYPE html>
<html ng-app="bus">
<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.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<script>
var app = angular.module('bus',[]);
app.controller('BusContorller', function($scope){
$scope.busbarnd = $scope.basname;
$scope.basname = {
name: 'tata',
yearprod: 2000,
}
});
</script>
<body ng-controller="BusContorller">
<div ng-controller="BusContorller as bus">
<p>Bus name : {{busbarnd.name}}</p>
</div>
</body>
</html>
I need your help with AngularStrap tabs and displaying calculated data. So, let's say I have a few inputs with ng-model. I calculate them and display in ng-bind. Everything works fine until I use tabs from AngularStrap. Then my output goes NaN - it looks like ng-model doesn't update, when I'm changing it's content.
You can take a look at what I mean here:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<div bs-active-pane="tabs.activeTab" bs-tabs>
<div ng-repeat="tab in tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-include="tab.templateUrl" bs-pane>
</div>
</div>
</div>
</body>
</html>
main.js
angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap'])
.controller('myCtrl', ['$scope', function($scope){
$scope.multiply = function(){
return $scope.first * $scope.second;
};
$scope.add = function(){
return $scope.first + $scope.second;
};
$scope.tabs = [
{
"title": "First",
"templateUrl": "first.html"
},
{
"title": "Second",
"templateUrl": "second.html"
}];
$scope.tabs.activeTab = "First";
}]);
first.html
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{multiply()}}
second.html
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{add()}}
What is really weird, is that when I use it without the tabs, it's working perfectly. Where is the mistake? How can I make it work with tabs?
This example is working like a charm:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{multiply()}}
</div>
</body>
</html>
I understand you can put debounce at or anywhere with ng-model. But what if there are multiple ng-model of the same object and one place to "display" it. And I want to set debounce at the "display" element instead.
For example, how do I make name to slowly display in <p> but sync fast in between input:
http://plnkr.co/edit/RZfqDfNGVdswniuPkuIC?p=preview
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.1/angular.js" data-semver="1.4.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p ng-model-options="{ debounce: { 'default': 500 } }">Hello {{name}}!</p>
<input ng-model="name" >
<input ng-model="name">
</body>
</html>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
CODE : http://plnkr.co/edit/H2hmEukfjaPL1T4W298O?p=preview
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="chosen#*" data-semver="1.0.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.20/angular.js" data-semver="1.2.20"></script>
<script src="chosen.jquery.js"></script>
<script src="chosen.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<select chosen class="red" ng-model="bar">
<option>Hi</option>
<option>This is fun</option>
<option>I like Chosen so much</option>
<option>I also like bunny rabbits</option>
<option value=""></option>
</select>
</body>
</html>
JS
var app = angular.module('plunker', ['localytics.directives']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
You can see that I tried to add class red to the div created by angular-chosen, together with other classes chosen-container chosen-container-single. I don't want to change those classes manually.
What is the right way to make sure additional classes got added?
Thanks
It looks like line 153 of chosen.jquery.js has an option for inherit_select_classes that defaults to false.
line 39 of the directive in chosen.js looks at the chosen attribute for the options:
options = scope.$eval(attr.chosen) || {};
so making your select markup:
<select chosen="{inherit_select_classes:true}" class="red" ng-model="bar">
results in this being generated:
<div class="chosen-container chosen-container-single red ng-pristine ng-valid localytics-chosen" >
(omitted extra attributes not relevant to this question)