We Keep Coding

Angularjs ng-repeat to repeat depending on a variable in the controller

This is a partial view. Ng-repeat repeats over a json file that contains 50 email records.
<table class="table table-hover" ng-controller="emailViewController">
<tbody data-ng-controller="settingsController">
<tr ng-repeat="email in emails" >
<td><input type="checkbox" ng-checked="checkAllEmail" ng-model="selectedEmail"/>
<a href="#">
<span class="glyphicon glyphicon-star-empty"></span>
</a></td>
<td><label ng-bind="email.from"></label></td>
<td><label ng-bind="email.subject"></label></td>
<td><label ng-bind="email.time"></label></td>
</tr>
</tbody>
</table>
settingsController.js
(function() {
'use strict';
var settingController = function (fetchDataService, $scope, savePreferenceService, $localStorage) {
$scope.url = 'app/mock/settings.json';
$scope.save = {};
fetchDataService.getContent($scope.url)
.then(function(response){
$scope.contacts = response.data.contacts;
$scope.languages = response.data.languages;
$scope.conversations = response.data.conversations;
$scope.undoSend = response.data.undoSend;
$scope.save = response.data.userPreferences;
});
$scope.setPreference = function () {
savePreferenceService.setPreferences($scope.save.selectedLang, $scope.save.converse, $scope.save.selectedNumber, $scope.save.selectedNumberContact, $scope.save.reply, $scope.save.signature);
}
$scope.conversation = $localStorage.selectedNumber;
};
angular.module('iisEmail')
.controller ('settingsController',
['fetchDataService', '$scope', 'savePreferenceService', '$localStorage', settingController]);
}());
I am having trouble figuring out how to get ng-repeat to iterate the JSON file depending on the value of $scope.conversation. So, for example, if $scope.conversation is 10, I want ng-repeat to iterate only 10 times. I don't want to display the remaining 40 emails. Does anyone have any ideas on how to achieve this functionality?
UPDATE
With the help of #Prashank's comment, I figured it out. Here is the code using the limitTo filter.
<table class="table table-hover" ng-controller="emailViewController">
<tbody data-ng-controller="settingsController">
<tr ng-repeat="email in emails | limitTo: conversation" >
<td><input type="checkbox" ng-checked="checkAllEmail" ng-model="selectedEmail"/>
<a href="#">
<span class="glyphicon glyphicon-star-empty"></span>
</a></td>
<td><label ng-bind="email.from"></label></td>
<td><label ng-bind="email.subject"></label></td>
<td><label ng-bind="email.time"></label></td>
</tr>
</tbody>
</table>

You can use limitTo or slice and do the following,
here is a sample,
Using limitTo:
<div ng-repeat="item in items | limitTo:needed">
{{item.name}}
</div>
limitTo

Well there are two ways of doing this.
The easier way would be to use $index in your ng-repeat to hide/show the items as follows:
<tr ng-repeat="email in emails" ng-hide="conversation.length() < $index">
//same as in the question
</tr>
The way I would do it(although its a little lengthy) is using a filter as follows:
HTML:
<tr ng-repeat="email in emails | conversationFilter: conversation">
//same as in the question
</tr>
Filter:
app.filter('conversationFilter', function() {
return function(collection, conversation) {
return collection.slice(0, conversation);
}
})

jsViews - re-evaluate 'if' tag on root property change

I have created a table/grid using jsViews. Each row has an edit button which when clicked selects the row and shows input controls instead of text values.
If I show/hide the inputs using data-link="visible{:#parent.parent.data.selectedIndex!==#index}" then it works fine.
However, I was trying a different approach using {^{if #parent.parent.data.selectedIndex===#index}}...{{else}}...{{/if}} to show/hide the inputs and this doesn't work when selectedIndex changes on my data object.
I also tried with {^{if ~root.selectedIndex===#index}} but that didn't work either. Is it possible to do this with {{if}}? The reason I am trying this over the first method that worked was to avoid rendering lots of select boxes which will just be hidden anyway.
My data object looks like this:
app = {
data: [...],
selectedIndex: null,
select: function select(index) {
if (this.selectedIndex !== index) {
$.observable(this).setProperty("selectedIndex", index);
}
}
};
I link the template like this:
$.templates("#myTemplate").link("#divHolder", app)
.on("click", ".data .editButton", function() {
app.select($.view(this).index);
})
.on("click", ".data .saveButton", function() {
// save details
})
.on("click", ".transmittals .cancelButton", function() {
// reset values
app.select(null);
});
My template is like this:
<script id="myTemplate" type="text/x-jsrender">
<table id="tblData" class="data">
<thead>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
{^{for data}}
<tr class="item">
<td>
{{if #parent.parent.data.selectedIndex===#index}}
<span class="editItem">
<button class="cancelButton">Cancel</button></span>
{{else}}
<span class="viewItem">
<button class="editButton">Edit</button></span>
{{/if}}
</td>
<td>
{^{if #parent.parent.data.selectedIndex===#index}}
<span class="editItem"><input type="text" data-link="B" /></span>
{{else}}
<span class="viewItem" data-link="B"></span>
{{/if}}
</td>
<td>
{^{if #parent.parent.data.selectedIndex===#index}}
<span class="editItem"><input type="text" data-link="C" /></span>
{{else}}
<span class="viewItem" data-link="C"></span>
{{/if}}
</td>
</tr>
{{/for}}
</tbody>
</table>
</script>

When you add an {{if}} block, it is a nested view, so the button click is not getting you the item view with the index. You need to use $.view(this).parent.index - or, simpler, $.view(this).getIndex() - which automatically steps up through nested views (if any) to the item view and gets its index.
app.select($.view(this).getIndex());
(See discussion here: https://github.com/BorisMoore/jsrender/issues/173#issuecomment-11058106)
BTW here is a modified form of your sample, just to give you some ideas. It uses <button data-link="{on ~root.select #getIndex()}">Edit</button> to hook up the click handler on the button and call the select method directly, passing it the index:
<script id="myTemplate" type="text/x-jsrender">
<table id="tblData" class="data">
<thead>
...
</thead>
<tbody>
{^{for data}}
<tr class="item">
{^{if ~root.selectedIndex===#index}}
<td><button class="cancelButton" data-link="{on ~root.select null}">Cancel</button></td>
<td><input data-link="A" /></td>
<td><input data-link="B" /></td>
{{else}}
<td><button class="editButton" data-link="{on ~root.select #getIndex()}">Edit</button></td>
<td data-link="A"></td>
<td data-link="B"></td>
{{/if}}
</tr>
{{/for}}
</tbody>
</table>
</script>
<div id="divHolder"></div>
<script>
var app = {
data: [{A:"aa", B: "bb"},{A:"aa2", B: "bb2"}],
selectedIndex: null,
select: function(index) {
if (this.selectedIndex !== index) {
$.observable(this).setProperty("selectedIndex", index);
}
}
};
$.templates("#myTemplate").link("#divHolder", app);
</script>

Delete Table Row from nested <ul> list item

I have a html table that has an <ul> in it. The table is bound by a knockout view model.
When I click on the TEST text I would like remove the <tr> that the clicked TEST text is in, from the table. I have it now so when I click on REMOVE it removes the <tr> but I need it so when I click on the TEST it removes the <tr>. Help is greatly appreciated!
FIDDLE with it, and/or see code snippet below.
VIEW MODEL
var rowModel = function(id, list) {
this.uid = ko.observable(id);
this.myList = ko.observableArray(list);
};
function myViewModel() {
var self = this;
self.myArr = ko.observableArray([
new rowModel(1, ["str1", "str2", "str3"]),
new rowModel(2, ["str1", "str2"]),
new rowModel(3, ["str1"])
]);
//this.myList = ko.observableArray();
self.removeItem = function(rowItem) {
self.myArr.remove(rowItem);
}
}
ko.applyBindings(new myViewModel());
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</thead>
<tbody data-bind="foreach: myArr">
<tr>
<td data-bind="text: uid"></td>
<td>
<ul data-bind="foreach: myList">
<li><span data-bind="text: $data"></span> TEST
</li>
</ul>
</td>
<td>REMOVE
</td>
</tr>
</tbody>
</table>

The problem is that the context of the data for the TEST link is a myList item, not a myArr item. Your removeItem() function is expecting a myList item. You need to pass the data from the (in this case) parent context. You can use $parentContext.$data or simply $parent.
<ul data-bind="foreach: myList">
<li>
<span data-bind="text: $data"></span>
TEST
</li>
</ul>

Change cell color via ng-click

I have change color of my cell when I click in my button but when I click second time my color cell is not keep.
I wish that when I click a second time on another button my first cell keeps color
First click:
Second click:
HTML:
<table class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr class="warning">
<th>Key</th>
<th>Valeur version {{application.version}}</th>
<th></th>
<th>Valeur version {{applicationcible.version}}</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr>
<td class="danger" colspan="4" ng-click="hideGroup = !hideGroup">
<a href="" ng-click="group.$hideRows = !group.$hideRows">
<span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
<strong>{{group.name}}</strong>
</a>
</td>
</tr>
<tr ng-repeat-start="member in group.members" ng-hide="hideGroup">
<td rowspan="2">
{{ member.name }}
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowLeft}">{{ member.valueRef }}</td>
<td class="cube" >
<div ng-if="group.id != 1">
<button type="button" ng-click="moveLeft($index, group)" ><span class="glyphicon glyphicon-chevron-left"></span></button>
</div>
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowRight}">{{ member.valueCible }}</td>
</tr>
<tr ng-repeat-end ng-hide="hideGroup" >
<td class="cube" >
<div ng-if="group.id != 2">
<button type="button" ng-click="moveRight($index, group)"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</td>
</tr>
</tbody>
</table>
CSS:
.selected { background-color: #ffff05; }
JS:
scope.moveLeft = function (index, group) {
move(scope.properties, group.id, index, 'left');
};
scope.moveRight = function (index, group) {
move(scope.propertiescible, group.id, index, 'right');
};
var move = function (properties, groupId, origin, destination) {
unregister();
var value;
if (destination === 'right') {
scope.selectedRowRight = origin;
} else {
scope.selectedRowLeft = origin;
}
...

You might need to create an array to keep the cells that are selected thus background color is changed.
Also you will need to change the ng-click function to check the array, and implement the following logic "if there is a record for the clicked row as selected change it's bg-color to yellow"

You will need to do something like this
<td ng-repeat="group in groups" ng-class="{'selected': check == group.title}" ng-click="select(group)">{{group.title}}</li>
in css make sure you have this selected class defined
.selected {
background: 'red';
}
in controller
$scope.check = '';
$scope.select = function (group) {
$scope.check = group.title
};
See this plunker http://plnkr.co/edit/pLbLMWsJ7A6Zr1Z9uAmz?p=preview

setting viewmodel property to be an item from a list

ok so i have my view model
function viewModel(calendarData) {
var self = this;
self.Calendars = ko.mapping.fromJS(calendarData);
self.ViewedCalendar = {};//what can/should i set this to be on initial creation?
self.DisplayCalendar = function (calendar) {
self.ViewedCalendar = calendar;
};
};
I then have my html:
<div data-bind="visible: Calendars().length > 0">
<h2>You have <span data-bind="text: Calendars().length"></span> calendars</h2>
<table class="table">
<thead>
<tr>
<th>Calendars</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: Calendars">
<tr>
<td data-bind="text: Name"></td>
<td><span data-bind="text: Events().length"></span> events</td>
<td><a href='#' data-bind='click: $root.DisplayCalendar'>View</a></td>
</tr>
</tbody>
</table>
</div>
<div data-bind="visible: ViewedCalendar() !== null">
Your are viewing <span data-bind="text: ViewedCalendar.Name"></span><br />
</div>
What I am trying to achieve is when the user clicks View for a given calendar, that via DisplayCalendar() I set the property ViewedCalendar to be set to the given calendar.
This then shows my div that contains the label stating what calendar is being viewed.
This is all rough code at the minute just to get the basic functionality in place but I'm new to knockout so could use some help.
I'm getting TypeError: ViewedCalendar is not a function or ViewedCalendar is undefined.
Any help would be much appreciated.

The ViewedCalendar property needs to be an observable for knockout to reach to changes in it's value. You defined it like this:
self.ViewedCalendar = {};
Which is an (empty) object literal and not a function (as the error message correctly stated). What you need is:
self.ViewedCalendar = ko.observable(); // empty () give you an empty observable - no calendar selected yet
And then you can update it in your click handler with:
self.ViewedCalendar(calendar);
Here's a working full example:
function viewModel(calendarData) {
var self = this;
self.Calendars = ko.mapping.fromJS(calendarData);
self.ViewedCalendar = ko.observable();
self.DisplayCalendar = function (calendar) {
self.ViewedCalendar(calendar);
};
};
ko.applyBindings(new viewModel([{Name:'some calendar', Events: []}, {Name:'another calendar', Events: []}]));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div data-bind="visible: Calendars().length > 0">
<h2>You have <span data-bind="text: Calendars().length"></span> calendars</h2>
<table class="table">
<thead>
<tr>
<th>Calendars</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: Calendars">
<tr>
<td data-bind="text: Name"></td>
<td><span data-bind="text: Events().length"></span> events</td>
<td><a href='#' data-bind='click: $root.DisplayCalendar'>View</a></td>
</tr>
</tbody>
</table>
</div>
<div data-bind="with: ViewedCalendar">
Your are viewing <span style="font-weight: bold" data-bind="text: Name"></span><br />
</div>