i have this peace of code in angularjs:
<div ng-repeat="item in benchmarGeographyObj">
<div style="padding-right: 60px;float:left;">
<input readonly style="width: 100%;" type="text" id="unik" ng-value="item.BEN_BENCHMARK_GEOGRAPHY" />
</div>
</div>
The Problem when i try to add ng-model in the input text, the value of ng-value disappeared, how i can fix this proble please ?
From the ngValue reference:
It can also be used to achieve one-way binding of a given expression
to an input element such as an input[text] or a textarea, when that
element does not use ngModel.
https://docs.angularjs.org/api/ng/directive/ngValue
This means you have to use either ngModel or ngValue, but not both. They conflict.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.benchmarGeographyObj = [{'BEN_BENCHMARK_GEOGRAPHY': 1},{'BEN_BENCHMARK_GEOGRAPHY': 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="//code.angularjs.org/1.3.1/angular.js" data-semver="1.3.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="item in benchmarGeographyObj">
<div style="padding-right: 60px;float:left;">
<input readonly style="width: 100%;" type="text" id="unik" ng-model="item.BEN_BENCHMARK_GEOGRAPHY" />
</div>
</div>
</body>
</html>
Related
Could you please explain why my ng-confirm-click doesn't work?
<div ng-controller="MainCtrl" ng-init="show=true;">
<p >Hello {{name}}!</p>
<button ng-show="show" confirmed-click="changes();show=false;" ng-confirm-click="Confirm change?">change</button>
</div>
I need to hide the button.
Here the example:
<!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.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-app = "plunker">
<div ng-controller="MainCtrl" ng-init="show=true;">
<p >Hello {{name}}!</p>
<button ng-show="show" confirmed-click="changes();show=false;" ng-confirm-click="Confirm change?">change</button>
</div>
</body>
</html>
Try this working code,
Inside html:
<div ng-confirm-click="Are you sure to delete this product ?" confirmed-click="deletePost(data.postId)"> <span class="glyphicon glyphicon-trash"></span></div>
In app.js file, put the below code(without any change):
app.directive('ngConfirmClick', [
function(){
return {
link: function (scope, element, attr) {
var msg = attr.ngConfirmClick || "Are you sure?";
var clickAction = attr.confirmedClick;
element.bind('click',function (event) {
if ( window.confirm(msg) ) {
scope.$eval(clickAction)
}
});
}
};
}])
Use scope.$apply instead of scope.$eval and remove unnecessary scope.$apply from controller.
From documentation:
This use of $eval: scope.$eval() seems to be deprecated in favor of scope.$apply to execute a function that uses and modifies the scope, and update the view later.
Plunker
Is there a way to initialize the following form fields so the Angular code doesn't display "NaN" when the form is loaded? Having the value start at zero would be nice.
<input type="text" id="field1" value="0"/>
<input type="text" id="field2" value="0"/>
<br />
Total {{field1*50--field2}}
http://plnkr.co/edit/Cn0tCJlclIMXivli1is0?p=preview
You can use the ng-init directive. Here's the stuff copied from your plunker that works with it. But you should use this with caution, here's an excerpt from the documentation:
The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
testing
<input type="text" id="field1" ng-model="field1" ng-init="field1 = 0"/>
<input type="text" id="field2" ng-model="field2" ng-init="field2 = 0"/>
<br />
Total {{field1*50--field2}}
</body>
</html>
So really, you should do this:
angular.module('app', [])
.controller('testCtrl', ['$scope',
function($scope) {
function init() {
$scope.field1 = 0;
$scope.field2 = 0;
}
init();
}
]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="testCtrl">
testing
<input type="text" id="field1" ng-model="field1" />
<input type="text" id="field2" ng-model="field2" />
<br />Total {{ field1 * 50 - -field2}}
</div>
</body>
</html>
You just add a controller to your HTML and assign a ng-model to your <input> fields and intialize it with some values in the controller instead of using value in <input>.
That's enough to have a default value for the fields
Here is the working plunker of your code,
http://embed.plnkr.co/Ssk1bP6LWq9YgAIDYaEk/preview
Hope this helps!!!!
this is my base app with angulajs 1.3.11 & ui.bootstrap. My Datepicker won't work. The date calendar don't show. Why? Thank's a lot.
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="bootstrap#*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.3.11" data-semver="1.3.11" src="https://code.angularjs.org/1.3.11/angular.js"></script>
<script data-require="ui-bootstrap-tpls-0.12.0.min.js#*" data-semver="0.12.0" src="https://raw.githubusercontent.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.12.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>DATE TEST</h1>
<div class="col-md-2">
<input type="text" class="form-control" data-ng-model="mydata" id="mydata" name="mydata" datepicker-popup="dd-MM-yyyy" />
</div>
</body>
</html>
And my Js:
var myApp = angular.module('app', ['ui.bootstrap']);
This is my base code on http://plnkr.co/edit/dmM3NiWPF30wXM4PiiPc?p=preview
We'll need to do below changes.
Bootstrap requires jQuery
Add is-open attribute to datepicker and toggle the flag when required.
Markup
<input type="text" class="form-control" data-ng-model="mydata" id="mydata"
name="mydata" datepicker-popup="dd-MM-yyyy" is-open="opened" ng-click="opened = !opened"/>
Here is the Updated plnkr
Bootstrap do not require JQuery.
OP was missing the controller and is-open variable. Working example.
In HTML:
is-open="opened"
and in JS:
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
I have the following in my plunker
<!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" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="//code.jquery.com/jquery-2.1.1.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<accordion close-others="false">
<accordion-group heading="Company" ng-click="toggleOpen()">
<div class="row" data-ng-repeat="item in companyValues">
<div class="col-xs-6">
<input name="companyFilter" type="radio" value="{{item.value}}" id="{{item.name}}-filter-radio" ng-model="userData.companyFilter" ng-change="saveUserPreferences()" />
</div>
<div class="col-xs-6 pull-text-left">{{item.name}}</div>
</accordion-group>
</accordion>
</body>
</html>
However, when I try to run I get a 404 on template/accordion/accordion-group.html. Any ideas?
Your markup loads two different versions of ui.bootstrap.
A version with templates for components pre-loaded in Angular.js' $templateCache service.
A version with no pre-loaded templates for if you want to tweak control looks.
Since version #2 is loaded 2nd, it appears that all the pre-loaded templates are not available.
Solution: Delete the line:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
Example: http://plnkr.co/edit/JyNu2hggAFt33hTvfoXo?p=preview
When you use angular.ui you also have to include angular.ui.tpls in your dependencies like so:
var app = angular.module('myApp', ['ui.bootstrap', 'ui.bootstrap.tpls']);
I have a template in which I have rows, and there are two elements in each row and each element has different classes so I have my Html structure like so (simplified)
<div ng-repeat "row in deals">
<div class="deal-title-left">{{row[0].title}}</div>
<div class="deal-title-right">{{row[1].title}}</div>
</div>
I would like to add a search box feature that will use live search to go through the deal titles. I have tried using the ng-model="search" and adding a search filter into the row div, but how do I apply the model to each individual deal instead of the entire row?
Demo :http://plnkr.co/edit/zGYLPcPHTr1TOSZTIBI2?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js" data-require="angular.js#1.2.x"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="search"/>
<div ng-repeat="row in deals | filter :{title:search}">
<div class="deal-title-left">{{row.title}}</div>
</div>
</body>
</html>
JS:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.deals = [{
title: "Cola for free"
}, {
title: "Icecream for free"
}, {
title: "Tee for free"
},
]
});