I am new to AngularJS. I am doing a project where label name will come from a database. I have to pass label id as a parameter and retrieve label name. When the page loads the value will get initialized in the label. But the problem is the value sets when I use ng-click. But I want this using ng-init/ng-bind, because clicking on the label is not a solution.
Here is the code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.test = function(e){
$scope.label=e.target.id;
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<label id="lblID" style="border:10px solid red;" ng-click="test($event)">{{label}}</label>
</div>
</body>
</html>
You should handle DOM manipulation in a directive as below.
DEMO
var app = angular.module('myApp', []);
app.controller('Ctrl', function ($scope) {
$scope.doSomething = function (e) {
alert(e);
};
});
app.directive('myDir', function () {
return function (scope, element, attrs) {
scope.doSomething(element);
};
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.test = function(e){
$scope.label=e.target.id;
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="Ctrl">
<label my-dir id="lblID" style="border:10px solid red;" ng-init="test('lblID')">{{label}}</label>
</div>
</body>
</html>
Related
Trying to make simple routing on AngularJs. I added ng-app to html once. And all my javascript takes okace in 1 file. My ng-view component doesn't show anything. There is my index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-route.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<ul>
<li>
Home
</li>
<li>
Gallery
</li>
<li>
Contribute Photo
</li>
</ul>
<div ng-view></div>
</body>
</html>
My main.js file
const app = angular.module('app', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/pages/home.html',
controller: 'homeController'
})
.when('/gallery', {
templateUrl: '/pages/gallery.html',
controller: 'galleryController'
})
.when('/contribute', {
templateUrl: '/pages/contribute.html',
controller: 'galleryController'
});
})
.controller('homeController', function($scope) {
})
.controller('galleryController', function ($scope) {
});
I tryied to use js libs from websites and localy but it didn't help. Compare with examples in the Internet, but everything i find is similar to mine. In my template files i just put some h1 headers.There is my project directory
Here is working code:
https://plnkr.co/edit/oHY8XMKk5Na13wU5JtNg?p=preview
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body ng-app="myApp">
<p>Main</p>
Red
Green
Blue
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<br/><h1>page1</h1>"
})
.when("/red", {
template : "<br/><h1>page2</h1>"
})
.when("/green", {
template : "<br/><h1>page3</h1>"
})
.when("/blue", {
template : "<br/><h1>Put your template url by by page url</h1>"
});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>
If you can give any suggestions for both HTML and JS.
The HTML code for my application is given below:
<ul>
<li ng-repeat=" opt in bcfList track by $index" ><input type="checkbox" ng-model="bcfList[opt]" />
{{ opt }}
</li></ul>
The Controller.js for my application is given below:
$scope.bcfList=data.BCFNUMBER;
$scope.getbcfnumber = function(index) {
$scope.bcflist=data.BCFNUMBER;
console.log($scope.selected);
}
The BCFNUMBER is the key value of the list that am getting from backend controller.java using map functions.
If you can add include the sample value of for $scope.bcfList Will be able to help better.
Updated code with the json values sent for $scope.bcfList
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script>
(function() {
angular.module("myapp", []).controller('MainCtrl', ['$scope', function($scope) {
$scope.bcfList= ["BCF-0025", "BCF-0049", "BCF-0051", "BCF-0091", "BCF-0096", "BCF-0100", "BCF-0115", "BCF-0117", "BCF-0118", "BCF-0130"];
$scope.checkedbcfList = [];
$scope.checkedBcf = function(item) {
if($scope.bcfList[item]){
$scope.checkedbcfList.push(item);
}
else{
var index = $scope.checkedbcfList.indexOf(item);
if (index !== -1) {
$scope.checkedbcfList.splice(index, 1);
}
}
}
/*$scope.getbcfnumber = function() {
$scope.checkedbcfList = [];
angular.forEach($scope.bcfList, function (item, index) {
if($scope.bcfList[item]){
$scope.checkedbcfList.push(item);
}
});
}*/
}]);
}());
</script>
<style></style>
</head>
<body ng-app="myapp" ng-controller="MainCtrl">
<ul>
<li ng-repeat=" opt in bcfList track by $index">
<input type="checkbox" ng-model="bcfList[opt]" ng-change="checkedBcf(opt)"/> {{ opt }}
</li>
</ul>
<!--<input type="button" value="Get checked bcf" ng-click="getbcfnumber()"/> -->
<div>checked BCF list: {{checkedbcfList}}</div>
</body>
</html>
I am really new angular and I have been struggling with this issue all day long. I am trying to add check boxes dynamically to my html page using ng-repeat and bind their ng-data-model.
Here is my code :
<!DOCTYPE html>
<html >
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"> </script>
<script>
(function(angular) {
var helloApp = angular.module("helloApp", []);
helloApp.controller("HelloCtrl", ['$scope',function($scope) {
$scope.legsDurations = {};
var amountOfLegs = 3;
for(var k = 1; k <= amountOfLegs; k++) {
$scope.legsDurations[k] = {
disabled: true
};
}
}]);
})(window.angular);
</script>
</head>
<body ng-app="helloApp">
<div ng-controller="HelloCtrl">
<div ng-repeat="value in legsDurations">
<input ng-data-model="value.disabled" type="checkbox" >
{{value.disabled}}
</div>
</div>
</body>
</html>
ng-data-model is wrong. Use ng-model or data-ng-model
...
<input ng-model="value.disabled" type="checkbox">
...
Code:
<!DOCTYPE html>
<html >
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"> </script>
<script>
(function(angular) {
var helloApp = angular.module("helloApp", []);
helloApp.controller("HelloCtrl", ['$scope',function($scope) {
$scope.legsDurations = {};
var amountOfLegs = 3;
for(var k = 1; k <= amountOfLegs; k++) {
$scope.legsDurations[k] = {
disabled: true
};
}
}]);
})(window.angular);
</script>
</head>
<body ng-app="helloApp">
<div ng-controller="HelloCtrl">
<div ng-repeat="value in legsDurations">
<input ng-model="value.disabled" type="checkbox" >
{{value.disabled}}
</div>
</div>
</body>
</html>
I want to make input like that: I am Programer, but if i will type wrong letter it will automatically erase it, or will not allow me to type that letter.
I have tried this kinda code: index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>I AM Programmer</title>
</head>
<body ng-app="myApp">
<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>
<!-- <h1>{{myForm.myInput.$valid}}</h1>
-->
</html>
script.js
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element, attr, mCtrl) {
function myValidation(value) {
if (value.indexOf("I am Programmer") > -1) {
mCtrl.$setValidity('charE', true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
style.css
body{
background-color: #fbfbfb;
}
input.ng-invalid {
border:2px solid #EA4335;
}
input.ng-valid {
background-color:lightgreen;
}
input{
width:800px;
height:60px;
text-align: center;
font-size: 30px
}
I think this is what you want
html
<input name="myInput" valid-ng-model="myInput" data-ng-trim="false" required my-directive>
script.js
var app = angular.module('myApp', []);
app.directive('myDirective', function ($parse) {
"use strict";
return {
require: 'ngModel',
restrict: "A",
link: function (scope, element, attr, mCtrl) {
function myValidation(value) {
if ("I am Programmer".toLowerCase().indexOf(value.toLowerCase()) === 0) {
mCtrl.$setValidity('charE', true);
return value;
} else {
mCtrl.$setViewValue(scope.myInput);
mCtrl.$render();
mCtrl.$setValidity('charE', false);
}
}
mCtrl.$parsers.push(myValidation);
}
};
});
app.directive('validNgModel', function ($compile, $parse) {
return {
terminal: true,
priority: 1000,
scope: true,
link: function link(scope, element, attrs) {
var parsedNgModel = $parse(attrs.validNgModel);
scope.$$customNgModel = angular.copy(parsedNgModel(scope));
element.attr('ng-model', '$$customNgModel');
element.removeAttr('valid-ng-model');
var compiledElement = $compile(element)(scope);
var ngModelCtrl = compiledElement.controller('ngModel');
scope.$watch('$$customNgModel', function (newModelValue) {
if (ngModelCtrl.$valid || ngModelCtrl.$error.required) {
parsedNgModel.assign(scope.$parent, newModelValue);
}
});
}
};
});
JSFiddle
You can use $validators. Below is the sample, inline with your example.
angular.module("myApp", [])
.controller('ctrl', function($scope) {})
.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element, attr, mCtrl) {
mCtrl.$validators.strictCheck = function(modelVal) {
var regex = /^I am Programmer$/;
if (regex.test(modelVal)) {
return true;
} else {
return false;
}
}
}
};
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ctrl">
<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
<span ng-if="myForm.myInput.$error.required">
Required!
</span>
<span ng-if="myForm.myInput.$error.strictCheck">
Please input 'I am Programmer'
</span>
</form>
</body>
</html>
You can modify RegExp accordingly, to match your need. You can also set the input value using $setViewValue(modelValue) and $render()
mCtrl.$setViewValue("");
mCtrl.$render();
I have the following code in which I want to display an alert when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app>
<button ng-click="alert('test')">Display Text</button>
<script src="angular.min.js"></script>
<script type="text/javascript">document.write("<base href=\"" + document.location + "\" />");</script>
<script type="text/javascript">
$scope.alert = function(variable) {
alert(variable);
};
</script>
</body>
</html>
The console is displaying this as an error: Uncaught ReferenceError: $scope is not defined
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<title></title>
</head>
<body ng-controller="ModelCtrl">
<button ng-click="alert('test')">Display Text</button>
<script src="angular.min.js"></script>
<script type="text/javascript">document.write("<base href=\"" + document.location + "\" />");</script>
<script type="text/javascript">
var app = angular.module('App', []);
app.controller('ModelCtrl', function ($scope, $http) {
$scope.alert = function(variable) {
alert(variable);
};
});
</script>
</body>
</html>