My template:
<div ng-repeat="comment in article.comments">
{{ comment.date }} by {{ comment.author }} <button type="button" ng-click="removeComment($index)">remove</button>
</div>
My JSON comments:
"comments": [
{
"author": "Syl A",
"date": "2014-07-02",
"content": "lol"
},
{
"author": "Syl B",
"date": "2014-07-02",
"content": "lol"
},
{
"author": "Syl C",
"date": "2014-07-02",
"content": "lol"
}
]
My controller:
$scope.removeComment = function (key) {
// This is what I want to remove
// Object {author: "Syl A", date: "2014-07-02", content: "lol", $$hashKey: "004"}
console.log($scope.article.comments[key]);
};
The following snippets is not OK, it does nothing;
$scope.article.comments.splice[key, 1];
The following snippets are not OK, the object is removed but in the view got "by remove", the complete line is not removed and I can't remove more than one item Error: [ngRepeat:dupes]:
$scope.article.comments[key] = undefined;
delete $scope.article.comments[key];
The following snippet is not OK, the object is removed but in the view got "by remove", the complete line is not removed:
$scope.article.comments[key] = {};
So I didn't find a solution on SO to make an "all-in-one" remove, DOM and "data". Why my splice doesn't work here?
You're using splice wrong is the problem.
Update your splice to use ( ) instead of [ ]
$scope.article.comments.splice(key, 1);
Related
I have a rudimentary understanding of AngularJS and have a couple (possibly stupid) questions about ng-if and ng-repeat.
If I have a ng-repeat that looks like this:
For all containers without titles, would the ng-repeat produce those containers and not show them? Or do they simply don't exist? The reason I ask is I've tried to replace ng-if with ng-show, but it does not produce the same outcome of "hiding" containers that do not have titles.
Is there a way to code a ng-if to say if the next container has no title, then do something. I tried something like ng-if="item.title=='' && $index+1", without any luck.
Any suggestions?
My data looks like this:
"_sections": [{
"_bootstrap_cells": 6,
"_count": 2,
"visible": true,
"columns": [{
"fields": [{
"name": "type_of_account",
"type": "field"
}, {
"name": "routing_transit_number",
"type": "field"
}]
}, {
"fields": [{
"name": "type_of_payment",
"type": "field"
}, {
"name": "check_digit",
"type": "field"
}]
}],
"caption": "Direct Deposit",
"id": "b456b9d2137ac340177c36328144b0ef"
}, {
"_bootstrap_cells": 12,
"_count": 1,
"visible": true,
"columns": [{
"fields": [{
"name": "account_number",
"type": "field"
}, {
"name": "account_title",
"type": "field"
}, {
"name": "financial_institution_name",
"type": "field"
}]
}],
"caption": "",
"id": ""
}
}]
The first section has two columns and a bootstrap cell value of 6 for each column, the second section only has one column and a bootstrap cell of 12. Since the second doesn't have a caption, I want it to be appended to the first section, but keep both sections' bootstrap formatting.
If containers is an array then it does not have a title property. You need to check the title on each item.
Also note that ng-if will not hide the content, but remove it or not insert it into the DOM. The counterpart of ng-show is ng-hide.
angular.module('appModule', [])
.controller('MyController', [function() {
this.containers = [{
aaa: 1,
title: 'One'
}, {
aaa: 2,
title: ''
}, {
aaa: 3,
title: 'Three'
}]
}]);
angular.bootstrap(window.document, ['appModule'], {
strictDi: true
});
<div ng-controller="MyController as myCtrl">
<div ng-repeat="item in myCtrl.containers track by $index">
<div ng-if="item.title!=''">{{$index}}. {{item.title}}</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
I'm using angular-schema-form in my project and trying to add an empty array in my model.
I expected that array type schema form will not contain any items but it actually pushed one object in my array and showed it in from.
How can I init form with no items in array?
html
<div ng-app="app" ng-controller="Controller as ctr">
<form sf-schema="ctr.schema" sf-form="ctr.form" sf-model="ctr.model"></form>
{{ctr.model.comments}} - Where this object come from? This array was empty. Is it possible to keep it empty on load?
</div>
js
var myApp = angular.module('app', ['schemaForm'])
.controller("Controller", function() {
this.schema = {
"type": "object",
"title": "Comment",
"properties": {
"comments": {
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {
"title": "Name",
"type": "string"
},
"comment": {
"title": "Comment",
"type": "string",
"maxLength": 20,
"validationMessage": "Don't be greedy!"
}
}
}
}
}
};
this.form = [{
"key": "comments",
"items": [
"comments[]"
]
}];
this.model = {
comments: [] // Empty array defined
};
});
Jsfiddle
The value you are looking for is startEmpty: true this will avoid pre-populating the array with an object.
Angular Schema Form: Array Documentation
The pre-population is defaulted to ensure that the form fields within an array are available when the form loads. The startEmpty: true value can override this behaviour.
I tried to pass the link title attribute for "Tags".
The Tag value should be an array now I am tried to remove double quotes on link title attribute.
When I hover currently I am getting :-["text", "text 1", "text 2"].
But expected format (Text Capitalized Case):- [Text, Text 1, Text 2]
HTML:
<div class="" ng-controller="myCrtl">
<span>Heading Documents</span>
<ul ng-repeat="list in names">
<li ng-repeat="lists in list.bookmarks">
{{lists.title}}
</li>
</ul>
</div>
JS File:
var app=angular.module('MyApp',[]);
app.controller('myCrtl',["$scope",function($scope){
$scope.names=[{
"description": "Testing File",
"totalCount": 6,
"bookmarks": [{
"title": "Google",
"link": "https://www.google.co.in",
"tags": [
"text", "text 1", "text 2"
]
},
{
"title": "Test Construction1",
"link": "http://google.com",
"tags": [
"content", "content 2", "content 3"
]
},
{
"title": "Test Connection",
"link": "https://www.google.com",
"tags": [
"message", "message 1"
]
}
]
}];
}]);
The reason you're getting ["text", "text 1", "text 2"] is because you're displaying an array with string in it; if you want a string that looks like [Text, Text 1, Text 2] then you can pipe the output through a function:
$scope.change = function(a){
a = a.map(function(x){
return x.replace(/^[a-z]/,function(m){
return m.toUpperCase()
});
});
return "["+a.join()+"]";
};
and in your view you just use it like:
<ul ng-repeat="list in names">
<li ng-repeat="lists in list.bookmarks">
{{lists.title}}</li>
</ul>
jsbin
you could also use angular filters to do it, but in the end the concept is : filter the data to obtain a modified output.
How can I get ng-repeat to only repeat items which contain subfields? I have a list of videos that updates based on language preference. I want to do something like ng-repeat="video in videos" only where ng-show="video.title[videoLanguage]" would make the element show. When I try using ng-show, it works somewhat but I have other code that works based on the length of the videos list (which updates since not all the videos are available in every single language).
Here's my code:
<ul ng-init="select=0" ng-style="{'margin-top': ((videoContainerHeight - (videos.length * 160)) / (videos.length - 1)) * select}">
<li ng-repeat="video in videos" ng-class="{'selected': select == $index}" ng-click="$parent.select=$index; changeNextPage(video.url);">
<div class="thumbnail"></div>
<div class="title">
<div class="title-cell">
<h2 ng-bind="video.title[videoLanguage]"></h2>
</div>
</div>
</li>
</ul>
Videos list object:
{
"id": "videos",
"url": "/videos",
"view": "views/videos.html",
"nextPage": "#/home",
"videos": [{
"url": "#/videos/extraction",
"thumbnail": "img/thumbnails/thumbnail.jpg",
"title": {
"english": "Short Title"
}
}, {
"url": "#/videos/extraction",
"thumbnail": "img/thumbnails/thumbnail.jpg",
"title": {
"english": "Longer Title Here",
"spanish": "Hi"
}
}, {
"url": "#/videos/extraction",
"thumbnail": "img/thumbnails/thumbnail.jpg",
"title": {
"english": "This is a Really Really Really Long Title",
"spanish": "Hi"
}
}, {
"url": "#/videos/extraction",
"thumbnail": "img/thumbnails/thumbnail.jpg",
"title": {
"english": "Short Title",
"spanish": "Hi"
}
}]
}
I'm looking to have ng-repeat generate a 4 item list when the language is set to english and a 3 item list when the language is set to Spanish.
I have created a fiddle , I think this is exactly what you want, ahve a look
https://jsbin.com/dinuku/edit?html,js,output
I created a filter to filter items based on language
app.filter('languageFilter', function() {
return function(array, lang) {
return (array || []).filter(function(item) {
if (lang in item.title) {
return true;
}
return false;
});
};
});
I suggested you the ng-switch
ng-switch doc
I am new to angularJS and I am having trouble with binding properties of scope so two way binding can work properly. I am using sample code to generate tabs.
<div ng-app="SampleApp">
<div id="tabs" ng-controller="GridController as gridcon">
<ul>
<li ng-repeat="tab in tabs"
ng-class="{active:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
<input type="button" ng-click="changedata()" value="Check" />
</div>
</div>
Now my scope have two observable arrays and I want to show count of those arrays in tab title. I am using following code for controller.
var appRoot = angular.module('SampleApp', ["kendo.directives"]);
appRoot.controller('GridController', ['$scope', function ($scope) {
$scope.data1 = new kendo.data.ObservableArray([
{
issueId: 1,
issue: "County Incorrect"
},
{
issueId: 2,
issue: "City Incorrect"
},
{
issueId: 3,
issue: "Name Incorrect"
}
]);
$scope.data2 = new kendo.data.ObservableArray([
{
"id": 11,
"first_name": "James",
"last_name": "Butt",
"company_name": "Benton, John B Jr",
"address": "6649 N Blue Gum St",
"city": "New Orleans",
"county": "Bridgepoort",
"state": "LA",
"zip": 70116,
"phone1": "504-621-8927",
"phone2": "504-845-1427",
"email": "jbutt#gmail.com",
"web": "http://www.bentonjohnbjr.com"
},
{
"id": 12,
"first_name": "Josephine",
"last_name": "Darakjy",
"company_name": "Chanay, Jeffrey A Esq",
"address": "4 B Blue Ridge Blvd",
"city": "Brighton",
"county": "Livingston",
"state": "MI",
"zip": 48116,
"phone1": "810-292-9388",
"phone2": "810-374-9840",
"email": "josephine_darakjy#darakjy.org",
"web": "http://www.chanayjeffreyaesq.com"
}
]);
$scope.tabs = [{
title: 'Issue List (0)'.replace("0", $scope.data1.length),
url: 'tab1.html'
}, {
title: 'Corrected (0)'.replace("0", $scope.data2.length),
url: 'tab2.html'
}];
$scope.currentTab = 'tab1.html';
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function (tabUrl) {
return tabUrl == $scope.currentTab;
}
$scope.changedata = function () {
$scope.data1.pop();
$scope.data2.pop();
console.log($scope.data1.length);
console.log($scope.data2.length);
}
}]);
Now this works fine when you are loading page for first time. Now on a button click ("Check" button), I am modifying the arrays. What should I do so that tab title is always in sync with length of arrays ? I have tried observable objects but unless I am using binding in view, they will just notify the event. Is there no other way except handling change event of observable arrays ?
you can Copy this piece of code inside the $scope.changedata function.
$scope.tabs = [{
title: 'Issue List (0)'.replace("0", $scope.data1.length),
url: 'tab1.html'
}, {
title: 'Corrected (0)'.replace("0", $scope.data2.length),
url: 'tab2.html'
}];
Also it remains outside as well.