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>
Related
There is a "scanning" graphic here that hides when you find the marker.
https://webxr.io/webar-playground/app/
How is that done? I have tried a bunch of different things with no luck. Maybe I am just not putting it in the correct place? Or need to call the action? Here is the last thing I tried:
'''
var m = document.querySelector("a-marker")
AFRAME.registerComponent('hide-on-scan', {
init: function () {
m.addEventListener("markerFound", (e)=>{
document.getElementsByTagName("HeaderText")[0].setAttribute("style", "display: none;");
})
m.addEventListener("markerLost", (e)=>{
document.getElementsByTagName("HeaderText")[0].setAttribute("style", "display: block;");
})
});
'''
I figured it out for those looking to do the same thing here's my HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style type="text/css">
#HeadText {
position: absolute;
top:0px;
left:50%;
z-index: 10000;
}
</style>
</head>
<body style='margin : 0px; overflow: hidden;'>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js">
</script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/dev/aframe/build/aframe-ar.js"></script>
<a-scene embedded arjs='sourceType: webcam;'>
<div id="HeadText" style="visibility:visible;">
<h1>test</h1>
</div>
<a-marker preset='hiro'>
<a-box id="MyBox" position='0 0.5 0' material='opacity: 0.5;' color="red" ></a-box>
</a-marker>
<a-camera-static />
</a-scene>
</body>
<script src="assets/script.js"></script>
</html>
</head>
<body>
And here is the script.js:
var m = document.querySelector("a-marker")
m.addEventListener("markerFound", (e)=>{
console.log("found")
document.getElementById("HeadText").style.visibility = "hidden";
})
m.addEventListener("markerLost", (e)=>{
console.log("lost");
document.getElementById("HeadText").style.visibility = "visible";
})
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 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>
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 now a Todolist but I want to have my Todolist with pagination :
when it reach 10 todos the next one will be on the 2dn page and then it will reach 20 the next one will on the 3rd page and so on. I would also that the list is updated when one of the todos is deleted
var app = angular.module("myapp", ['ui.bootstrap']);
app.controller('TodoCtrl', ['$scope', '$filter', function ($scope, $filter)
{
$scope.currentPage = 1;
$scope.itemsPerPage = 10;
$scope.maxSize = 5;
$scope.list = [];
//thrid argument if we watch the list all the times
$scope.$watch('list', function()
{
$scope.remain = $filter('filter')($scope.list, {completed:false}).length;
}, true)
$scope.removeTodo = function(index)
{
//delete on element from index
$scope.list.splice(index, 1);
}
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.addTodo = function()
{
if ($scope.newTodo != '')
{
$scope.list.push(
{
// model newTodo
name : $scope.newTodo,
completed : false
})
}
else
alert("Message can not be empty !")
//to empty task
$scope.newTodo = '';
}
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>MyTodoList</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5
/angular.min.js"></script>
<link data-require="bootstrap-css#3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<!--<link rel="stylesheet" href="style.css">-->
</head>
<body>
<div ng-app="myapp">
<section id = "todoapp" ng-controller="TodoCtrl">
<header id="header">
<h1>MyTodoList</h1>
<form action="#" id="todo-form" ng-submit="addTodo()">
<input type="text" id="new-todo" placeholder="New todo" autofocus autocomplete="off" ng-model="newTodo">
</form>
</header>
<section id = "main">
<u1 id = "todo-list">
<li ng-repeat="todo in list.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))" ng-class="{completed: todo.completed}">
<div class="view">
<input type="checkbox" class="toggle" ng-model="todo.completed">
<label>{{todo.name}}</label>
<button class="destroy" ng-click="removeTodo($index)"></button>
</div>
</li>
</u1>
</section>
<footer id="footer">
<pagination page="currentPage" total-items=2 items-per-page="itemsPerPage" on-select-page="setPage(page)"></pagination>
<span id="todo-count"><strong> {{ remain }} </strong> Todo(s) remaining
</span>
</footer>
</section>
</div>
<script src="js/app.js"></script>
<script src="js/MyTodoList.js"></script>
</body>
</html>
The only real change was to pagination. You need to supply an expression that it can watch to get the number of items.
I wasn't sure if you only wanted to only display ToDos if they aren't completed or not. If you do, I can modify the code to do that for you.
var app = angular.module("myapp", ['ui.bootstrap']);
app.controller('TodoCtrl', ['$scope', '$filter', function ($scope, $filter)
{
$scope.currentPage = 1;
$scope.itemsPerPage = 10;
$scope.maxSize = 5;
$scope.list = [];
//thrid argument if we watch the list all the times
$scope.$watch('list', function()
{
$scope.remain = $filter('filter')($scope.list, {completed:false}).length;
}, true)
$scope.removeTodo = function(index)
{
//delete on element from index
$scope.list.splice(index, 1);
}
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.addTodo = function()
{
if ($scope.newTodo != '')
{
$scope.list.push(
{
// model newTodo
name : $scope.newTodo,
completed : false
})
}
else
alert("Message can not be empty !")
//to empty task
$scope.newTodo = '';
}
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>MyTodoList</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5
/angular.min.js"></script>
<link data-require="bootstrap-css#3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<!--<link rel="stylesheet" href="style.css">-->
</head>
<body>
<div ng-app="myapp">
<section id = "todoapp" ng-controller="TodoCtrl">
<header id="header">
<h1>MyTodoList</h1>
<form action="#" id="todo-form" ng-submit="addTodo()">
<input type="text" id="new-todo" placeholder="New todo" autofocus autocomplete="off" ng-model="newTodo">
</form>
</header>
<section id = "main">
<u1 id = "todo-list">
<li ng-repeat="todo in list.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))" ng-class="{completed: todo.completed}">
<div class="view">
<input type="checkbox" class="toggle" ng-model="todo.completed">
<label>{{todo.name}}</label>
<button class="destroy" ng-click="removeTodo($index)">Remove</button>
</div>
</li>
</u1>
</section>
<footer id="footer">
<pagination page="currentPage" total-items="list.length" items-per-page="itemsPerPage" on-select-page="setPage(page)"></pagination>
<span id="todo-count"><strong> {{ remain }} </strong> Todo(s) remaining
</span>
</footer>
</section>
</div>
<script src="js/app.js"></script>
<script src="js/MyTodoList.js"></script>
</body>
</html>