I am trying to use if statement in knockoutjs with databinding:
for example this if should be false and the text in div should be hidden:
<!-- this is what i am trying to get working. -->
<div data-bind="if: little">rank : little</div>
My guess is this piece does not work as intended. It should return false as on start the the clickCount is 0.
this.little = function(){
return this.clickCount() > 5;
};
I have pasted the code of app.js and index.html.
this is app.js
var ViewModel = function (){
this.clickCount = ko.observable(0);
this.name = ko.observable('Tabby');
this.imgSrc = ko.observable('img/2.jpg');
this.imgAttribution = ko.observable('http://www.flickr.com/photos/big');
this.incrementCounter = function() {
this.clickCount(this.clickCount() + 1);
};
// this is not returning false as it should.
this.little = function(){
return this.clickCount() > 5;
};
}
ko.applyBindings(new ViewModel());
this is index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cat Clicker</title>
</head>
<body>
<div>
<h2 data-bind="text: name"></h2>
<div data-bind="text: clickCount"></div>
<!-- this is what i am trying to get working. -->
<div data-bind="if: little">rank : little</div>
<img src="" alt="cute cat" data-bind="click: incrementCounter, attr:{src: imgSrc}">
</div>
<script src="js/lib/knockout-3.2.0.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Hi you can use visible Binding of knockout
Following code will work for you:
<div data-bind="visible: !little()">rank : little</div>
OR
<div data-bind="visible: little()">rank : little</div>
Related
I have a third-party component that using jQuery (FineUploader). When a document gets uploaded, it fires an event in javascript/jquery and I need to, at that point, call a function that is inside my Angular component from the jquery code that is outside my Angular component.
The angular button works as expected but I can't get the jQuery button to call the function successfully.
Here's my plunker example code
HTML Page
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script data-require="jquery#1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
function widgetController() {
var model = this;
model.addWidget = function(text) {
alert(text);
}
}
var app = angular.module("app", []);
app.component("widget", {
templateUrl: "template.html",
controllerAs: "model",
controller: [widgetController]
});
</script>
</head>
<body>
<div ng-app="app">
<widget></widget>
</div>
</body>
</html>
Template Page
<center>
<p>The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.</p>
<button id="addAngular" ng-click='model.addWidget("ANGULAR WORKED!!")'>Add widget using Angular</button>
<button id="addJquery">Add widget using jQuery</button>
</center>
<script>
$(function() {
//This is mocking up an event from the third-party component.
$("#addJquery").on("click", function(){
model.addWidget("JQUERY WORKED!!"); //I need to be able to call the Angular function from jQuery
});
});
</script>
I think this may have done the trick but I'm not sure if there is a better answer. Please post an alternate solution if there is a better one.
Here's the working Plunker
HTML Page
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script data-require="jquery#1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
var externalWidget;
function widgetController($scope, WidgetFactory) {
var model = this;
model.factory = WidgetFactory;
model.addWidget = function(text, isUpdatedExternally) {
model.isUpdated = text;
var newWidget = text;
model.factory.widgets.push(newWidget);
if(isUpdatedExternally)
{
$scope.$apply();
}
console.log("updated!");
}
model.checkWidget = function() {
console.log(model.isUpdated);
}
model.isUpdated = "NOT UPDATED";
model.addWidget("Controller initialized Widget");
externalWidget = model;
console.log(externalWidget);
}
var app = angular.module("app", []);
app.factory('WidgetFactory', function () {
var widgetList = [];
var initialWidget = "Factory Initialized Widget";
widgetList.push(initialWidget);
return {
widgets: widgetList
};
});
app.component("widget", {
templateUrl: "template.html",
controllerAs: "model",
controller: ["$scope", "WidgetFactory", widgetController]
});
</script>
</head>
<body>
<div ng-app="app" id="ngApp">
<widget></widget>
<br />
<center><button id="addJquery">Add widget using jQuery</button></center>
</div>
<script>
$(function() {
//This is mocking up an event from the third-party component.
$("#addJquery").on("click", function(){
externalWidget.addWidget("JQUERY WORKED!!!", true);
});
});
</script>
</body>
</html>
Template Page
<center>
<p>The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.</p>
<button id="addAngular" ng-click='model.addWidget("ANGULAR WORKED!!")'>Add widget using Angular</button>
<button id="checkAngular" ng-click='model.checkWidget()'>Check widget using Angular</button>
</center>
<ul>
<li ng-repeat="w in model.factory.widgets">
{{w}}
</li>
</ul>
I am trying to implement a modal popup in angularjs using ngmodal. The code runs ,there is no error returned on the browser console but nothing happens when the modal is clicked. Below is my attempt and code
Index.html file
<html ng-appp="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">
<script src="ngDialog.js"></script>
<link src="ngDialog.css"></link>
<script src="ngDialog.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<button ng-click="clickToOpen()">My Modal</button>
<script type="text/ng-template" id="templateId">
<div id="target" ng-click="test()" ng-controller="tt">
Click here
</div>
</script>
</div>
</body>
</html>
app.js file
var myApp = angular.module('myApp',['ngDialog']);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope, ngDialog) {
$scope.clickToOpen = function () {
ngDialog.open({ template: 'templateId' });
};
}
function tt($scope)
{
$scope.test = function()
{
console.log("AaA");
}
}
Source of tutorial http://jsfiddle.net/mb6o4yd1/6/
Kindly assist
HTML Page.
You didnt put ng-app
<!DOCTYPE html>
<html lang="en">
<head>
<script src="Scripts/angular.js"></script>
<script src="Scripts/ngDialog.js"></script>
<script src="Scripts/app.js"></script>
<link href="Content/ngDialog.css" rel="stylesheet" />
<link href="Content/ngDialog-theme-default.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<button ng-click="clickToOpen()">My Modal</button>
</div>
<script type="text/ng-template" id="templateId">
<div ng-controller="tt" class="ngdialog-message">
<button ng-click="test()">Click here </button>
</div>
</script>
</div>
Here is your app.js
var myApp = angular.module('myApp', ['ngDialog']);
myApp.controller('MyCtrl', function ($scope,ngDialog) {
$scope.clickToOpen = function () {
ngDialog.open({
template: 'templateId'
});
};
});
myApp.controller('tt', function ($scope) {
$scope.test = function () {
alert('It works');
}
});
Let me know still you find any problem.(I have added ngDialog-theme-default.css )
I am getting a infinite digest cycle error with the filter code below. What is incorrect with it. I do not see an issue with this. Is there a different method of assignation or is it a known bug? I am not sure whats happening here with this error
<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta charset="UTF-8">
<title>Directives</title>
<script src="lib/angular.min.js"></script>
<script src="lib/app.js"></script>
<link rel="stylesheet" href="lib/style.css">
</head>
<body>
<h1>Test Text for style</h1>
<div ng-controller="firstCtrl">
<input type="text" ng-model="search">
<div ng-repeat="var in variable | filtername:'test':'test2':'test3' track by $index">
{{var}}
</div>
</div>
<script>
var app = angular.module("demo",[]);
app.filter("filtername",function(){
return function(array, arrayField, arrayField1, arrayField2){
/* modification here */
var myArr = [];
for(var i=0;i<array.length;i++){
if((array[i].name===arrayField) || (array[i].name===arrayField1) ||(array[i].name===arrayField2)){
myArr.push({name: angular.uppercase(array[i].name)});
}
}
return myArr;
}
})
app.controller("firstCtrl",function($scope){
$scope.variable = [
{name:"test"},
{name:"test2"},
{name:"test3"},
{name:"test4"}];
})
</script>
</body>
</html>
I wrote a simple first app in AngularJS starting from a template for a todo list. None of the functions defined binds the scope (Both adding a new task or edit the current once). Anything I am doing commonly wrong in all the scopes of the controller?
Thanks in advance.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.8/angular.js"></script>
<script src="js/script.js"></script>
<link href='//fonts.googleapis.com/css?family=Roboto:100,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="page-container">
<h2>Todo</h2>
<ul class="todo-list" ng-repeat="todo in todos track by $index">
<li>
<span>{{ todo }}</span>
<button class="bt bt-achieve" ng-click="done(todo)">Done</button>
</li>
</ul>
</div>
<ul class="add-todo">
<li>
<input type="text" class="txt" placeholder="New Todo" ng-model="newTodo" ng-keyup="add($event)" />
</li>
</ul>
</body>
</html>
And my JS Script:
var app = angular.module('Todo', []);
app.controller('TodoCtrl', function($scope) {
$scope.newTodo = '';
$scope.todos = [
'Maged Task',
'Essam Task',
'Ashraf Task'
];
$scope.done = function(todo) {
var indexOf = $scope.todos.indexOf(todo);
if (indexOf !== -1) {
$scope.todos.splice(indexOf, 1);
}
};
$scope.add = function(e) {
if (e.which && e.which === 13) {
$scope.todos.push($scope.newTodo);
$scope.newTodo = '';
}
};
});
you haven't bound to the angular app or controller.
Try
<body ng-app="ToDo" ng-controller="TodoCtrl">
Change the body tag as below
<body ng-app="Todo" ng-controller="TodoCtrl" >
I always prefer to give initial data in ng-init method .
In your code you can use the initial data for $scope.todos like as below.
html code :
<body ng-app="Todo" ng-controller="TodoCtrl" ng-init="initialData()" >
javascript code
Inside controller
$scope.initialData = function(){
$scope.newTodo = '';
$scope.todos = [
'Maged Task',
'Essam Task',
'Ashraf Task'
];
}
change <body> to <body ng-app="Todo" ng-controller=TodoCtrl>
My goal is to spin a servo for a certain amount of seconds on a HTML button click. I am using an Arduino Yun as my microcontroller.
When I type in the URL directly the servo spins as it should. When I click on these buttons using the Angular.js GET request nothing happens. Even a regular form submit button works.
Is there something missing from my code?
Is there an easier way to accomplish this?
Here is my front-end code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body>
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
</script>
If I just type in the URL in my browser with the setting value of 1 or 2 the servo works fine.
Please see working demo
var app = angular.module('app', []);
app.controller('ArduinoCtrl', function($scope, $http) {
$scope.response = {};
$scope.progress = false;
$scope.setServo = function(setting) {
$scope.progress = true;
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url).then(sucess, error).then(function() {
$scope.progress = false;
});
function sucess(response) {
angular.copy(response, $scope.response)
}
function error(response) {
angular.copy(response, $scope.response)
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
<p ng-show="progress">Please wait</p>
<div ng-hide="progress">
<hr/>
<p>Response</p>
<pre>{{response | json}}</pre>
</div>
</div>
</div>
You need to add the ng-app directive and add your controller to a module:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body ng-app="myApp">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
angular.module("myApp", []).controller("ArduinoCtrl", ArduinoCtrl);
</script>