I have a variable set to true in ng-click but the div underneath is not displaying. I've followed this post but it looks like it doesnt work in maybe ng-repeat? Here's the plunker: http://plnkr.co/edit/90G1KAx9Fmf2SgRs5gYK?p=preview
angular.module('myAppApp', [])
.controller('MainCtrl', function ($scope) {
$scope.notes = [{
id: 1,
label: 'First Note',
done: false,
someRandom: 31431
}, {
id: 2,
label: 'Second Note',
done: false
}, {
id: 3,
label: 'Finished Third Note',
done: true
}];
$scope.reach= function (id) {
//the assignment below works
//$scope.flag = true;
alert("hello there");
};
});
<div ng-app="myAppApp">
<div ng-controller="MainCtrl">
<div ng-repeat="note in notes">
{{note.id}} - {{note.label}} -
click me
</div>
<div class="row" id="" ng-show="flag">I'm Here</div>
</div>
</div>
It should be ng-click="$parent.flag = true;reach(111);"
click me
Outside ng-repeat
You question is unclear, you could use ng-repeat inside ng-repeat, by maintaining variable in ng-repeat parent scope. and access parent scope using $parent. annotation inside ng-repeat
<div ng-repeat="note in notes">
{{note.id}} - {{note.label}} -
click me
<div class="row" id="" ng-show="$parent.selected == note.id">I'm Here</div>
</div>
</div>
Inside ng-repeat
I would advise you to use ng-init
<div ng-repeat="note in notes" ng-init="parent=$parent">
and after that
click me
Please see demo below
angular.module('myAppApp', [])
.controller('MainCtrl', function($scope) {
$scope.notes = [{
id: 1,
label: 'First Note',
done: false,
someRandom: 31431
}, {
id: 2,
label: 'Second Note',
done: false
}, {
id: 3,
label: 'Finished Third Note',
done: true
}];
$scope.reach = function(id) {
//$scope.flag = true;
alert("hello there");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="myAppApp">
<div ng-controller="MainCtrl">
<div ng-repeat="note in notes" ng-init="parent=$parent">
{{note.id}} - {{note.label}} -
click me
</div>
<div class="row" id="" ng-show="flag">I'm Here</div>
</div>
</div>
</body>
Related
I am using ng-options to display drop-down with options. Suppose I have three options in it for example option1, option2, option3.By default option1 is selected, now if a user selects option2, then $pristine becomes False and again if he selects option1 then from angularjs's prospective $pristine should be false but according to user he has not changed the option.So I was looking for a way to detect this change
Here is the Js fiddle demo
HTML
<div ng-app="myApp">
<div ng-controller="ctrl">
<form name="myForm">
{{myForm.$pristine}}
<select ng-model='list' ng-options='item.name for item in data'>
</select>
</form>
</div>
</div>
JS code
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.data = [{
id: 1,
name: 'test'
}, {
id: 2,
name: 'test1'
}];
$scope.list = $scope.data[0];
$scope.$watch('list', function(o, n) {
if ($scope.list == $scope.data[0])
$scope.myForm.$pristine = true;
})
});
You have add watch on your list model then this can be achieved
That is exactly what ng-change is for.
Usage would be like this (added $index to show you another option):
HTML
<div ng-app="myApp">
<div ng-controller="listController">
<form name="myForm">
<select ng-model="currOption"
ng-options='item.name for item in data'
ng-change="optionChanged(currOption, $index)">
</select>
</form>
</div>
</div>
Controller
angular.module('myApp')
.controller('listController', function($scope) {
$scope.data = [{
id: 1,
name: 'option1'
}, {
id: 2,
name: 'option2'
}, {
id: 3,
name: 'option3'
}];
$scope.optionChanged(option, index) {
// option = the selection the user just made.
// index = the index of the selection in your data. I.E. $scope.data[index]
};
});
I have the following in my controller:
var myApp = angular.module("myApp", []);
myApp.controller("TestCtrl", ['$scope', function($scope) {
$scope.rows = [
'Facebook',
'Twitter',
'Pinterest',
'Instagram',
'Tumblr',
'Google'
];
}]);
and I'm trying to show the content like this
<div class="container">
<div ng-app="myApp">
<div ng-controller="TestCtrl">
<label ng-repeat="row in rows">
<input type="checkbox" ng-checked="row.selected" ng-model="row.selected" />{{row}}</label>
</div>
</div>
right now the items show, but I can't check the checkboxes,
check this Plunker
In order to have your checkbox checkable, you need to pass a valid ng-model there. In your case, row.selected is invalid since every row is a string and not object.
You can have your $scope.rows array like this instead:
$scope.rows = [{
name: 'Facebook',
selected: false
}, {
name: 'Twitter',
selected: false
}, {
name: 'Pinterest',
selected: false
}, {
name: 'Instagram',
selected: false
}, {
name: 'Tumblr',
selected: false
}];
Here's a forked plunker which has checkboxes checkable
I try to do TODO list using Angular.js
I have function addTask, but it dosen't work. I try to give it project and than get array of tasks. In Chrome I see this mistake "Cannot read property 'tasks' of undefined"
This is my app.js
var app = angular.module('toDoList', ['ngDialog']);
app.controller('MainCtrl', [
'$scope',
'$rootScope',
'ngDialog',
function($scope, $rootScope, ngDialog){
$scope.test = 'Hello world!';
$scope.projects = [
{id: '1', title: 'For Home', tasks: [ {title: 'task 1', done:false }, {title: 'task 2', done: false }]},
{id: '2', title: 'For Work', tasks: [ {title: 'task 1', done:false }, {title: 'task 2', done: false }]}
];
$scope.addProject = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.projects.push({
title: $scope.title
});
};
$scope.addTask = function(project){
$scope.project.tasks.push({
title: $scope.tasktitle, done: false
});
}]);
This is my html code
<body ng-app="toDoList" ng-controller="MainCtrl">
<div class="project" ng-repeat="project in projects">
<span class="title">{{project.title}}</span>
<form name="frm" ng-submit="addTask(project)">
<input
type="text"
class="form-control"
placeholder="Start to type task"
ng-model="tasktitle">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Add Task</button>
</span>
</form>
<ul class="todo-list">
<li ng-repeat="task in project.tasks">
<input type="checkbox" ng-model="task.done">
<span ng-class="{done:task.done}">{{task.title}}</span>
</li>
</ul>
</div>
</body>
How can I push my data about task?
This is doesn't work:
$scope.addTask = function(project){
$scope.project.tasks.push({
title: $scope.tasktitle, done: false
});
};
First and foremost, you're missing an 's' in $scope.project.tasks.push. It should be projects, so as to match up with the scope variable.
Second, you're not actually choosing a project to push to. $scope.projects is an Array. You would need to choose an index to push to. Here's what I think you're going for:
HTML
<form name="frm" ng-submit="addTask(project.id, tasktitle)">
Javascript
$scope.addTask = function(id, task){
$scope.projects[id].tasks.push({
title: task
, done: false
});
};
EDIT: Working codepen at: codepen.io/Pangolin-/pen/YPVwye – Pangolin
I could fix this, but i don't know is it right?
HTML
<form name="frm" ng-submit="addTask(project.tasks, tasktitle)" class="input-group">
Javascript
$scope.addTask = function(project, value){
project.push({
title: value
});
I need to call a js function when an ng-repeat template is created:
<div ng-repeat="item in items">
<input id="ip{{item.id}}">
<script>$(function () { $('#ip{{item.id}}').kendoDatePicker(); });</script>
</div>
The id is replaced as expected, but angular doesn't seem to work inside script tags.
That is correct, Angular will not evaluate expressions in script tags. You will need to use a directive that will initialize the Kendo plugin for each element.
The good news is Kendo already has a module for integrating with Angular, so you might as well just use that. Here is a plunk I put together showing it in a repeater.
<div ng-repeat="item in items">
<label for="{{item.id}}">{{item.id}}</label>
<div>
<input kendo-date-picker ng-model="item.value" />
</div>
</div>
Controller:
angular.module("demo", ['kendo.directives'])
.controller('DemoCtrl', ['$scope',
function($scope) {
$scope.items = [{
id: 'item1',
value: null
}, {
id: 'item2',
value: null
}, {
id: 'item3',
value: null
}, {
id: 'item4',
value: null
}];
}
]);
I have an array $scope.items.
I want if the item is the $first one of the ngRepeat to add the css class in.
Is it something that can be done with angular? Generally how can I handle the booleans in Ajs?
<div ng-repeat="item in items">
<div class='' > {{item.title}}</div>
</div>
It should be
<div ng-repeat="item in items">
<div ng-class='{in:$first}' > {{item.title}}</div>
</div>
Look at ng-class directive in http://docs.angularjs.org/api/ng.directive:ngClass and in this thread What is the best way to conditionally apply a class?
You can try approach with method invocation.
HTML
<div ng-controller = "fessCntrl">
<div ng-repeat="item in items">
<div ng-class='rowClass(item, $index)' > {{item.title}}</div>
</div>
</div>
JS
var fessmodule = angular.module('myModule', []);
fessmodule.controller('fessCntrl', function ($scope) {
$scope.items = [
{title: 'myTitle1', value: 'value1'},
{title: 'myTitle2', value: 'value2'},
{title: 'myTitle3', value: 'value1'},
{title: 'myTitle4', value: 'value2'},
{title: 'myTitle5', value: 'value1'}
];
$scope.rowClass = function(item, index){
if(index == 0){
return item.value;
}
return '';
};
});
fessmodule.$inject = ['$scope'];
Demo Fiddle