Angular populate ng-repeat and ng-model - javascript

In my app I have a widget that is used on multiple pages and the selections made on the widgets are to be transferred between pages. So if I select something in the widget on the homepage and click 'continue' which then takes me to a new page, the widget should be pre-populated with the selections made on the homepage.
My widget follows the following format (although not exact for simplistic explanations):
<li ng-repeat="device in devices track by $index">
<select name="model[{{$index}}]" ng-model="selectedManufacturer" ng-options"...">
<select name="model[{{$index}}]" ng-model="selectedModel" ng-options"...">
</li>
It's the values of the ng-models inside the repeat statement that contain the key data in the widget that needs to be transferrable.
The number of devices needs to be transferrable too but that will be easy as devices is just an array of numbers so selectedModel.length -1 will equal the value of devices on the secondary pages.
Is it possible to pre-populate the values of ng-models?

Yes, you can prepopulate values of ng-models (or any scope variable) using ng-init

If you want to pre-populate the value in your ng-model which would mean a default/inital value in your drop-down. This can be achieved by doing the following:-
$scope.selectedManufacturer = listOfManufacturer[0];
$scope.selectedModel = listOfSelectedModel[0];

Related

css equivalent of WPF data template binding

I have a collection of objects in JS with a name and two boolean fields, which looks like the following.
{
"Name": "testname",
"ReadAccess": true,
"WriteAccess": false
}
I keep these in a collection on my angular controller as so
$scope.permissions = permissionArray;
Which I'm currently binding to a select box as so
<select size="20" style="width: 585px" ng-disabled="disableControls" ng-model="ComputePermissionsService.selectedPermission" ng-options="permissions.Name for permissions in ComputePermissionsService.Permissions"></select>
Which gives me a tall select window with the name of each permission.
I want to mimic the Select box functionality and display my collection of objects as a scrollable list, however I want to do something I used to do in WPF and redefine the DataTemplate for the data row. So for each object that binds as an Option to the Select, I want to display the Name as a label, then two check boxes representing the Boolean values on my object. I want these to be clickable so I can toggle them and have this update the underlying JS object so if I then click save, all I have to do is send the data to the server to update.
This used to be easy in WPF with custom DataTemplates but I'm not sure if this is possible in CSS/JS/HTML. Can someone suggest a clean way to do this?

Can I make ng-model data available across multiple divs that are hidden and shown at runtime?

I have a problem with some data I want to use as part of a signup form in angular.js. I have the form split out into multiple "steps" - such as company account information, then admin user information, and finally, payment information. This is common in many web applications, so I know it has to be possible.
I have three divs which house each section of the form, as follows :
<div class="lc-block" id="l-register1" data-ng-class="{ 'toggled': lctrl.register1 === 1 }" data-ng-if="lctrl.register1 === 1">
<div class="lc-block" id="l-register2" data-ng-class="{ 'toggled': lctrl.register2 === 1 }" data-ng-if="lctrl.register2 === 1">
<div class="lc-block" id="l-register3" data-ng-class="{ 'toggled': lctrl.register3 === 1 }" data-ng-if="lctrl.register3 === 1">
As you can tell here, these three sections are hidden and shown, based on some ui interaction which changes the valus of variables to make a given "step" appear.
So here is my main issue : I want data from a model in "l-register1" to still be available when I am on the third step, for example, if I have the following input field inside "l-register1"...
<input type="text" class="form-control" ng-model="client" placeholder="Company name">
... and I hit "next" - I would like to still be able to retrieve that data during steps 2, and 3 - as I will obviously need it after all the data is in place, to send it off to my API (which I already have working)
Any help with this would be awesome, I have been banging my head against a wall all day, trying to get this working!
Just put all your ng-model and associated variables in one controller and you can hide and show your different div's based on conditional variables. Thus, as you put all your variable references within one controller it will automatically preservers the data associated with it. Also if you would like to use different controllers for the different page than you can also achieve the same. In that case you need to make service and share the data between two controllers. Just build the service which maintain your shared object and the controllers will handle with the reference. I have explained more with detail information here. In totality that's what whole angular is all about single page application.

Multi Dropdown JSON Filter Search AngularJS

I am new to AngularJS and writing an AngularJS application with four drop down (select) acting as the search criteria to filter the search result.
Each drop down is populated by a field from the search result.
Though, some of the dropdown fields are not displayed in the search result.
The expected logic is as follows:
1.On page load, you display the 4 dropdown and underneath the unfiltered results say, 10 rows
2.On change of dropdown A, the associated filter is applied to the JSON result and result is refreshed and automatically displayed
3.The last selected dropdown option is retained each time
4.On change of dropdown B, the associated filter is applied to the JSON result and result is refreshed and automatically displayed, limiting result further
5.On change of dropdown D, the associated filter is applied to the JSON result and result is refreshed and automatically displayed, limiting result further
6.On change of dropdown C, the associated filter is applied to the JSON result and result is refreshed and automatically displayed, limiting result further
So, the dropdown can be selected in any order and there is a cummulative filtering
Also, if no result is returned by filter combination, a message is displayed.
I have a solution for one drop down, but cannot implement multiple drop down filter on same json data.
My solution was based on the following filter data using dropdown?, which as a plunker.
Any help will be very much appreciated.
You can pass an Object as the parameter to your filter expression, as described in the API Reference here http://docs.angularjs.org/api/ng.filter%3afilter. This object can selectively apply the properties you're interested in, like so:
<input ng-model="search.name">
<input ng-model="search.phone">
<input ng-model="search.secret">
<tr ng-repeat="user in users | filter:{name: search.name, phone: search.phone}">
Here's a Plunker : http://plnkr.co/edit/kozaU39E74yqjZCpgDqM?p=preview
The plunker works for input tags, hence it will also work for select tags with few modifications.
Disclaimer : Plunker Not Created By Me

AngularJS - Binding the model to inputs that were not created with ng-repeat

I have the following ui scenario:
Need to create a ui with three inputs to allow the user to enter his/her favorite movies. Those inputs will be always three except that they were populated previously, or except that the user uploaded three movies and he/she is coming back to see the list.
So:
Case 1: The user doesn't have any data stored. So there should be three inputs, not generated with hg-repeat, but bounded to the model.
Case 2: The user has less than two (out three) movies loaded. Two inputs can be generated with hg-repeat, but the last one it must be shown.
Case 3: The user has three inputs filled, the ui must generate a four -empty- blank input to allow the user to continue adding his/her favorite movies.
Which is the best approach with angular to achieve this?
Thanks so much in advance,
Guillermo
In each case, you should use a ng-repeat. And I would do something like this :
create an object to store the value
movies={movie1:undefined, movie2:undefined, movie3undefined}
Pre-fill this object with user loaded movies if any
create your ng-repeat
<li ng-repeat='movie in movies'> with you input binded to movies : <input ng-model='movies[movie]'>
You can also create a last li item with a ng-if testing if the 3 values are filled and then adding a fourth input.

MVC3 - jQuery datepicker when multiple elements have the same ID

I have a weird situation (don't we all?) with datepickers and want to get some advice.
I have a screen with a list of Locations, and for each Location, they can click Edit and edit that location. The Edit displays below the Edit link, and they can edit multiple locations at one time. This means the same View is rendered on the screen multiple times, and therefore multiple fields will exist with the same id (editing 4 locations will result in 4 "DateOpened" fields).
So, when I load my View, javascript adds datepickers to any fields that need it like so:
$(document).ready(function () {
var elements = $(".NeedsDatePicker > td > input");
$(".NeedsDatePicker > td > input").datepicker();
$(".NeedsDatePicker").removeClass("NeedsDatePicker");
});
Works fine, but, as you've probably already figured out, when I click a date on the calender, it populates the first "DateOpened" field when multiple Edit windows are open.
Is there a way to tell the datepicker to use the field WITHIN a certain parent, like you can for general jQuery selects?
$("#DateOpened", "Location-134").doWhatever...
...or is there a way to give the fields different id's without breaking MVC's UpdateModel() function? Or any other advice?
You should definitely keep IDs unique within an HTML DOM. Most, if not all, DOM manipulation libraries/frameworks, including jQuery, have this assumption built-in.
There are a few questions on SO WRT to avoid the same IDs in the form:
two forms with same input id in asp.net mvc
how to prevent html input id duplication on asp.net mvc 3 when a model contains multiple elements

Categories