Very new Angular and super-confused as to how to use the $destroy method to remove an element as mentioned in the API doc here:
http://docs.angularjs.org/api/ng.$rootScope.Scope
Here is the HTML I tried:
<div ng-controller="TodosController">
<div class="tasks" ng-show="todos">
<ul ng-repeat="todo in todos">
<li>
<button ng-click="todos.$destroy(todo)">Delete</button>
<b>{{todo.name}}</b>
</li>
</ul>
</div>
</div>
And the JS:
var myApp = angular.module('myApp', []);
function TodosController($scope) {
$scope.todos = [{
name: "Learn angular",
estimate: 8,
done: true},
{
name: "Install java",
estimate: 2,
done: false},
{
name: 'Uninstall ruby',
estimate: 3,
done: false}];
}
Here is my fiddle for above:
http://jsfiddle.net/5Mzda/26/
In older version of Angular, it is possible to use the $remove method to remove an element.
<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.9.16/angular-0.9.16.js"></script>
<div ng:controller="TodosController">
<div class="tasks" ng:show="todos">
<ul ng:repeat="todo in todos">
<li>
<div ng:controller="TodoEditorController">
<button ng:click="todos.remove(todo)">Delete</button>
<b>{{todo.name}}</b>
</div>
</li>
</ul>
</div>
</div>
The above is working in this Fiddle:
http://jsfiddle.net/bpTXe/195/
However, using $destroy(), $remove(), and remove() doesn't work in later version of Angular. Any suggestions?
$destroy is for destroying $scopes.
array.$remove has been removed in version 0.10.6 bubblewrap-cape (2012-01-17)
You can use array.splice:
<button ng-click="todos.splice(key,1)">Delete</button>
Related
A quick explanation: this is a simple app meant to recreate Reddit, so each comment on a post (which I'm calling a "node") contains an array of comments (nodeList), and each comment can have any number of nodes in this list. What I want to do is push an added comment into the current ng-repeat object's "nodeList", so that I can add the comment without refreshing.
This recursive template works, but only when I refresh the page, so it isn't being pushed into the current scope of the ng-repeat. I've done some research about $index, but because it's recursively generated there is no way of knowing how deep down the tree of nested arrays you could be.
What I tried was $scope.x.nodeList = [] and then pushing a new "node" into that, thinking that each instance of "x" is a new $scope within the ng-repeat, but this is not working.
Controller:
redditLite.controller('post', function($routeParams, $scope, $http) {
var postId = $routeParams.id;
var controller = this;
var postComment = {};
var node = {};
$scope.show = true;
$scope.addComment = {};
$scope.post = {};
$scope.x = {};
$scope.x.nodeList = [];
controller.comment = function(parentId) {
postComment.comment = $scope.addComment.body;
postComment.parentId = parentId;
postComment.rootPostId = $scope.post.id;
$http.post('add-comment',postComment, config).then(function(response) {
node = response.data;
$scope.x.nodeList.push(node);
});
}
});
HTML:
<script type="text/ng-template" id="postTree">
<div class="username">
{{x.username}}
</div>
<div class="body">
{{x.body}}
</div>
<div class="metrics">
<ul>
<li>
Likes: {{x.likes}}
<br>
<button class="like-button" ng-click="controller.likeNode(x.nodeId); x.likes = x.likes + 1">Like</button>
</li>
<li>
Comments: {{x.cmmnts}}
<br>
<button class="comment-button" ng-click="show = !show" ng-show="show">Comment!</button>
<div class="comment-field" ng-hide="show">
<input type="text" placeholder="Enter a comment." ng-model="addComment.body">
<br>
<button ng-click="controller.comment(x.nodeId); show = !show">Submit</button>
<br>
<button ng-click="show = !show">Cancel</button>
</div>
</li>
<li>
Date: {{x.submit_date}}
</li>
</ul>
</div>
<div class="nodes">
<ul ng-if="x.nodeList" ng-model="x.nodeList">
<li ng-repeat="x in x.nodeList" ng-include="'postTree'"></li>
</ul>
</div>
</script>
<div class="post">
<div class="username">
{{post.username}}
</div>
<div class="body">
{{post.body}}
</div>
<div class="metrics">
<ul>
<li>
Likes: {{post.likes}}
<br>
<button class="like-button" ng-click="controller.like(post.id); post.likes = post.likes + 1">Like</button>
</li>
<li>
Comments: {{post.cmmnts}}
<br>
<button class="comment-button" ng-click="show = !show" ng-show="show">Comment!</button>
<div class="comment-field" ng-hide="show">
<input type="text" placeholder="Enter a comment." ng-model="addComment.body">
<br>
<button ng-click="controller.comment(post.id); show = !show">Submit</button>
<br>
<button ng-click="show = !show">Cancel</button>
</div>
</li>
<li>
Date: {{post.submit_date}}
</li>
</ul>
</div>
</div>
<ul class="master-list">
<li ng-repeat="x in post.nodeList" ng-include="'postTree'"></li>
</ul>
There is some missing logic that needs to be handled, but for now I'm trying to get this working to push an object into an array no matter how deeply nested that array is within other objects.
Edit: I've included an image of the JSON structure as a referencece, and it can be seen that each node object can contain an array of node objects, so this is the array that I am attempting to push a new node into.
I've done recursive templating like this successfully several times. If I recall, having the ng-repeat and ng-include on the same html tag is problematic. Try wrapping the contents of your script in a div, remove the ng-include attribute from your li elements, and instead add an ng-include element inside of your li elements. Also, you have basically added your template twice, once for the root item, then again to add recursive behavior. You should be able to only have 1 template (the script one) if you wrap your post variable inside of an array in your markup.
<script type="text/ng-template" id="postTree">
<div>
...
<div class="nodes">
<ul ng-if="x.nodeList" ng-model="x.nodeList">
<li ng-repeat="x in x.nodeList">
<ng-include src="'postTree'"></ng-include>
</li>
</ul>
</div>
</div>
</script>
<ul class="master-list">
<li ng-repeat="x in [ post ]">
<ng-include src="'postTree'"></ng-include>
</li>
</ul>
Update:
When comment is clicked, send the parent to the function instead of just the parent id. This way, you can push the child onto it's parent after the $http post completes.
JS:
angular
.module('redditLite', [])
.controller('post', function($scope, $http) {
var controller = this;
$scope.show = true;
$scope.post = {
id: 1,
parentId: null,
username: 'jeff',
body: 'my fantastic comment',
likes: 152,
submit_date: new Date(),
nodeList: []
};
$scope.comment = function(parent) {
var postComment = {
id: 2,
parentId: parent.id,
username: 'jeff',
body: parent.addComment,
likes: 0,
submit_date: new Date(),
nodeList: []
};
console.log('adding comment', postComment, parent)
$http.post('add-comment',postComment, config).then(function(response) {
var node = response.data;
parent.nodeList.push(node);
});
}
});
HTML
<script type="text/ng-template" id="postTree">
<div>
<div class="username">
{{x.username}}
</div>
<div class="body">
{{x.body}}
</div>
<div class="metrics">
<ul>
<li>
Likes: {{x.likes}}
<br>
<button class="like-button" ng-click="controller.likeNode(x.nodeId); x.likes = x.likes + 1">Like</button>
</li>
<li>
Comments: {{x.nodeList.length}}
<br>
<button class="comment-button" ng-click="show = !show" ng-show="show">Comment!</button>
<div class="comment-field" ng-hide="show">
<input type="text" placeholder="Enter a comment." ng-model="x.addComment">
<br>
<button ng-click="comment(x); show = !show">Submit</button>
<br>
<button ng-click="show = !show">Cancel</button>
</div>
</li>
<li>
Date: {{x.submit_date}}
</li>
</ul>
</div>
<div class="nodes">
<ul ng-if="x.nodeList" ng-model="x.nodeList">
<li ng-repeat="x in x.nodeList">
<ng-include src="'postTree'"></ng-include>
</li>
</ul>
</div>
</div>
</script>
<ul class="master-list">
<li ng-init="x = post">
<div ng-include="'postTree'"></div>
</li>
</ul>
Plunker:
https://plnkr.co/edit/X40JoHduKYy12QPuLBCo?p=preview
You might be getting hurt by lexical scope. Basically:
$http.post('add-comment',postComment, config).then(function(response) {
node = response.data;
$scope.x.nodeList.push(node); //this $scope is not actually your $scope
});
Try doing:
var vm = this;
$http.post('add-comment',postComment, config).then(function(response) {
node = response.data;
vm.$scope.x.nodeList.push(node); //should be the right scope.
})
If this doesn't work, try double checking your bindings. A value not updating normally means the binding is not correct.
Try using $scope.x.nodeList.concat([node]); instead of pushing the value, like this avoid mutations in the object.
how can i use ng-tags-input inside a ng-repeat loop, when each element has different tags? How can i set the ng-model dynamically?
<div ng-controller="myController">
<ul>
<li ng-repeat="file in files">
{{file}} <tags-input ng-model="tags"></tags-input>
</li>
</ul>
</div>
app.controller('myController', function ($scope) {
$scope.tags = ['tagA','tagB'];
// $scope.tags['file1'] = ['tagA','tagB'];
// $scope.tags['file2'] = ['tagC','tagD'];
});
Thanks in advance!
I have the same solution as Claies suggested but I tried my self.
Please check working example : http://plnkr.co/edit/bNQ6DrUlNWdEAi8fnvBr?p=preview
HTML
<ul>
<li ng-repeat="file in files">
{{file.name}}
<tags-input ng-model="file.tags"></tags-input>
</li>
</ul>
Controller
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.files = [
{
name : 'file1','tags': [{text: 'tagA'},{text: 'tagB'}]
},
{
name : 'file2','tags': [{text: 'tagC'},{text: 'tagD'}]
}
];
});
You can use the ng-model to form a more complex expression such as tags[file], assuming file is the string corresponding to the key in your dictionary.
<div ng-controller="myController">
<ul>
<li ng-repeat="file in files">
{{file}} <tags-input ng-model="tags[file]"></tags-input>
</li>
</ul>
</div>
$scope.tags = {
'first': [{text: 'Tag1'}, {text: 'Tag2'}],
'second': [{text: 'Tag3'}, {text: 'Tag4'}]
};
$scope.files = ['first', 'second'];
See plunker example
I have an application that has two forms that are lists of buttons and a form with a list of labels. I choose a person, choose a phone, and on the third form I show a list of phones and their associated people (location). Is it possible to set a variable with ng-click inside an ng-repeat block? I tried settings a variable _person to be equal to the the button text, which would be {{person}}, but _person doesn't seem to be set to anything when I print it on the next form. I'm also not sure if I used ng-init correctly in the first <div>, and should I be using ng-model at all?
<div ng-init="showSelectUser=true; _person=''">
<div class="selectUser" ng-show="showSelectUser">
<h2>Who are you?</h1>
<ul ng-click="showSelectUser=false; showDeviceForm=true;">
<li ng-repeat="person in people">
{{person}}
</li>
</ul>
</div>
<div class="selectDevice" ng-show="showDeviceForm" ng-click="showDeviceForm=false; showDeviceList=true">
<p>person: {{_person}}</p>
<h2>Which phone?</h2>
<ul>
<li ng-repeat="device in devices">
<a class="btn btn-default" href="#" role="button" ng-click="device.location=_person">{{device.name}}</a>
</li>
</ul>
</div>
<div class="devicesView" ng-show="showDeviceList">
<ul>
<li ng-repeat="device in devices">
<h3>{{device.name}}</h3>
<h4 class="deviceLocation">{{device.location}}</h4>
</li>
</ul>
</div>
</div>
angular.module('devicesApp')
.controller('MainCtrl', function ($scope) {
$scope.devices = [
{name: 'iPhone 4', location: 'Desk'},
{name: 'iPhone 5', location: 'Desk'},
{name: 'iPhone 6', location: 'Desk'},
];
$scope.people = [
'John',
'Scott',
'Adam'
];
});
The ngRepeat directive creates a new scope, so if you have ng-click="device.location=_person" the device model will be created in that scope if it not exists. So make sure that device already exists in a parent scope, for example by setting $scope.device = {} in your controller.
_person is undefined, because it is defined in the inner scope of the ng-repeat="person in people". Currently your ng-click sets every device location to undefined.
In general you will have a lot of scope inheritance issues when using expressions in ngClicks instead of doing something like ng-click="setPerson()" and have $scope.setPerson = function () { ... } in your controller.
Please clarify what you want to do in more high level terms and I will update my answer.
Edit
Something like this looks more logical for me. However, I think you will have a lot of UX issues because the user is not able to change its choice after clicking one of the list items.
Note that if you put business logic in JS files instead of templates, it is easier to test.
<div ng-app="devicesApp" ng-controller="MainCtrl">
<div class="selectUser" ng-show="step === 'step1'">
<h2>Who are you?</h2>
<ul>
<li ng-repeat="person in people">
{{person}}
</li>
</ul>
</div>
<div class="selectDevice" ng-show="step === 'step2'">
<p>person: {{selected.person}}</p>
<h2>Which phone?</h2>
<ul>
<li ng-repeat="device in devices"> <a class="btn btn-default" href="#" role="button" ng-click="selectDevice(device)">{{device.name}}</a>
</li>
</ul>
</div>
<div class="devicesView" ng-show="step === 'step3'">
<ul>
<li ng-repeat="device in devices">
<h3>{{device.name}}</h3>
<h4 class="deviceLocation">{{device.location}}</h4>
</li>
</ul>
</div>
</div>
In JS file:
angular.module('devicesApp', []).controller('MainCtrl', function ($scope) {
$scope.devices = [{
name: 'iPhone 4',
location: 'Desk'
}, {
name: 'iPhone 5',
location: 'Desk'
}, {
name: 'iPhone 6',
location: 'Desk'
}, ];
$scope.people = [
'John',
'Scott',
'Adam'];
$scope.selected = {};
$scope.step = 'step1';
$scope.selectPerson = function (person) {
$scope.selected.person = person;
$scope.step = 'step2';
};
$scope.selectDevice = function (device) {
device.location = $scope.selected.person;
$scope.step = 'step3';
}
});
See this JSFiddle.
I have a html like this :
<div class="fields-plan"data-ng-repeat="roomname in assign.roomname">
<section>
<span>Room: {{roomname}}</span>
</section>
<ul data-ng-repeat="room in assign.rooms.roomname">
<li>
{{room.room}}
</li>
<ul>
</div>
and my angular controller look like this:
var room = {"1.2":
[
{room: "1.2.1"},
{room: "1.2.2"},
{room: "1.2.3"}
],
"1.3": [
{room: "1.3.1"},
{room: "1.3.2"},
{room: "1.3.3"}
]};
var keys = Object.keys(room);
this.roomname = keys;
this.rooms = room;
In my second ng repeat, it doesn't work and how can i loop based on roomname, that output from the first ng repeat??
Your second ng-repeat needs to take the first ng-repeat value instead of directly taking the room name, so your second ng-repeat should look like this:
Code:
<div class="fields-plan"data-ng-repeat="(key, value) in assign.rooms">
<section>
<span>Room: {{key}}</span>
</section>
<ul data-ng-repeat="room in value">
<li>
{{room.room}}
</li>
<ul>
</div>
You can achieve this by slightly reformatting your Json and then using the following code:
The key is to use the value of the first ng-repeat in the second ng-repeat and not trying to reference the first collection.
html:
<div ng-controller="MyCtrl">
<div class="fields-plan" ng-repeat="room in rooms">
<section>
<span>Room: {{room.name}}</span>
</section>
<ul ng-repeat="subroom in room">
<li>
{{room.subRoom}}
</li>
<ul>
</div>
</div>
javascript:
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.rooms = [ { name : "1.2",
subRoom: [
"1.2.1","1.2.2","1.2.3"],
}, { name: "1.3",
subRoom: [
"1.3.1","1.3.2","1.3.3"]}];
}
Fiddle demo: http://jsfiddle.net/0pnam0wj/
Is this you wanted?
plnkr
<div data-ng-repeat="(roomnamePrefix, roomname) in rooms">
<section>
<span>Room: {{roomnamePrefix}}</span>
</section>
<ul data-ng-repeat="room in roomname">
<li>
{{room.room}}
</li>
<ul>
</div>
it's me again :)
I am still at the very beginning with angularJS and I have just encountered a problematic issue.
I've got an array with some data that I want to be rendered on the page that's why I use ng-repeat but I also need to include another ng-repeat in the previous one.
I have the general ng-repeat="dialog in dialogWindows" and lower in the DOM ng-repeat="input in dialog.inputs", but the second ngRepeat dousnt work and it reports no errors in the coonsole. can You help me please?
Here is the JS:
var antroApp = angular.module('antroApp', []);
function dialogWindows($scope){
$scope.dialogWindows = [
{id:0,
idName:"pigmentation",
number:"1",
name:"Pigmentation",
answer1:"Clear complexion",
answer2:"Semi-swarthy complexion",
answer3:"Swarthy complexion",
answer4:"",
answer5:"",
answer6:"",
inputs:[{id:0,a:"a1",answer:"a"},
{id:1,a:"a2", answer:"b"}],
}
];
}
antroApp.controller('antroApp', antroApp);
and here is my HTML:
<div ng-controller="dialogWindows">
<div ng-repeat="dialog in dialogWindows">
<div id="{{dialog.idName}}" class="bold abs">
<div class="questionContainer rel">
<div class="menu abs">
<ul class="menuList">
<li id="menuStart" class=" unbold">Start</li>
<li id="menuAbout" class=" unbold">About</li>
<li id="menuTech" class=" unbold">Technology</li>
<li id="menuContact" class=" unbold">Contact</li>
</ul>
</div>
<div class="questionHeader"><div class="textGradient unbold tgHeaderXY">{{dialog.number}}.{{dialog.name}}</div></div>
<div class="empty"> </div>
<div class="questionBody">
<div ng-repat="input in dialog.inputs">
<input type="radio" id="radio1" name="sex" value="male">
<label for="radio1" class="answer abs {{input.a}}">{{input.answer}}</label>
</div>
</div>
Next <i class="icon-arrow-right icon-white"></i>
<i class="icon-pencil tgHeaderIcon icon-3x abs"></i>
</div><!--/pigmentation-->
</div><!--/ng-repeat-->
</div><!--/ng-controller-->
Any help will be appreciated.Thanks
Just single mistake;
set <div ng-repeat="input in dialog.inputs">
instead <div ng-repat="input in dialog.inputs">
As a side note:
use <pre>{{input|json}}</pre> as basic debugger to detect the issue
see Fiddle
In your nested loop you have to use ng-repeat, instead of ng-repat. If you would strip off example markup from unnecessary garbage before posting question, you would probably find typo yourself.
Then, you're missing ng-app="antroApp" directive in example.
Then, controller is dialogWindows, not antroApp:
antroApp.controller('dialogWindows', dialogWindows);
Missing closing div, typo as per Nenad answer, same naming for App and Controller, same naming for controller and scope variable... ouch my mind hurts, anyways, here is the result at jsbin
EDIT: (as per minitech request)
this an alternative version, example in jsbin has unnecessary code in question removed
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
</head>
<body ng-app="myApp"> <!-- *myApp is antroApp app -->
<div ng-controller="myCtrl"> <!-- *myCtrl is dialogWindows ctrl -->
<div ng-repeat="dialog in data"> <!-- data is dialogWindows scope var -->
<div class="bold abs">
<div class="questionContainer rel">
<div class="menu abs">
<ul class="menuList">
<li id="menuStart" class=" unbold">Start</li>
<li id="menuAbout" class=" unbold">About</li>
<li id="menuTech" class=" unbold">Technology</li>
<li id="menuContact" class=" unbold">Contact</li>
</ul>
</div>
<div class="questionHeader">
<div class="textGradient unbold tgHeaderXY">{{dialog.number}}.{{dialog.name}}</div>
</div>
<div class="empty"> </div>
<div class="questionBody">
<div ng-repeat="input in dialog.inputs">
<input type="radio" id="radio1" name="sex" value="male" />
<label for="radio1" class="answer abs {{input.a}}">{{input.answer}}</label>
</div>
</div> Next <i class="icon-arrow-right icon-white"></i>
<i class="icon-pencil tgHeaderIcon icon-3x abs"></i>
</div><!--/questionContainer--> <!-- *missing div -->
</div><!--/pigmentation-->
</div><!--/ng-repeat-->
</div><!--/ng-controller-->
<script>
var App = angular.module('myApp', []); //*myApp is in use now
App.controller('myCtrl', ['$scope', //*myCtrl is in use now
function ($scope) {
$scope.data = [{
id: 0,
idName: "pigmentation",
number: "1",
name: "Pigmentation",
answer1: "Clear complexion",
answer2: "Semi-swarthy complexion",
answer3: "Swarthy complexion",
answer4: "",
answer5: "",
answer6: "",
inputs: [{
id: 0,
a: "a1",
answer: "a"
}, {
id: 1,
a: "a2",
answer: "b"
}]
}];
}]);
</script>
</body>
</html>