Binding ng-repeat and ng-model in controller - angularjs

This is my first post on here so bear with me, I'm fairly new to AngularJS as well. I'm trying to build a form with ng-repeat and having trouble wrapping my head around the angular stuff.
JS in controller:
$scope.myCurrentAssets = {
cash_equiv: {name: 'Cash & Equivalents', value: 0, tbi: 41},
invest: {name: 'Short Term Investments', value: 0, tbi: 42},
notes_rec: {name: 'Notes Receivable', value: 0, tbi: 43},
account_rec: {name: 'Accounts Receivable', value: 0, tbi: 44},
inventory: {name: 'Inventory', value: 0, tbi: 45},
prepaid: {name: 'Prepaid Expenses', value: 0, tbi: 46},
other: {name: 'Other Current Assets', value: 0, tbi: 47}
};
HTML:
<div class="row" ng-repeat="(keyAssets, valueAssets) in myCurrentAssets">
<span>{{valueAssets.name}}</span>
<input data-name="myCurrentAssets.{{keyAssets}}"
data-ng-model=""
data-placeholder="{{valueAssets.value}}"
data-ng-change="compute()"
/>
</div>
The problems I'm having are:
trying to get the 'data-ng-model' set to something unique in each instance of the ng-repeat
how do I access the value of the input field from the compute() function?

trying to get the 'data-ng-model' set to something unique in each instance of the ng-repeat
You can use list[key][value] that will be different per item in ng-repeat
how do I access the value of the input field from the compute() function?
Generally you can use ng-model that automatically fetches input data.
<div class="row" ng-repeat="(keyAssets, valueAssets) in myCurrentAssets">
<span>{{valueAssets.name}}</span>
<input data-name="myCurrentAssets[keyAssets]['name']"
data-ng-model="myCurrentAssets[keyAssets]['value']"
data-placeholder="myCurrentAssets[keyAssets]['value']"
data-ng-change="compute(myCurrentAssets[keyAssets]['value'])"
/>
</div>
Demo Fiddle

Related

Filtering in angular

Can someone help on how to re-write the below code in Angular. I am having problem in handling filters
ng-repeat="data in myController.data | filter:{filterFlag:'true'}"
AngularJS
Lets say you have an array of objects (in your case named data) in your myController i.e.
this.data = [
{id: 1, name: 'Oscar', age: 36},
{id: 2, name: 'Nina', age: 36},
{id: 3, name: 'Alex', age: 39},
]
And you want to filter out people with the age 36, you could iterate over it in the template like this:
<div ng-repeat="data in myController.data | filter:{age:36}">
{{data}}
</div>
Angular
In any case, filters are expensive. Thats why they are considered bad practice, thats why you are not recommended to use it in Angular. The style guide says, you ought to filter out the objects in the controller, rather than in the template. You might want to consider doing the same in AngularJS. You could write a method which does the job.
For more go to ... ng-repeat :filter by single field

AngularJS Dropdown Multiselect options not working

I am using AngularJS Dropdown Multiselect - http://dotansimha.github.io/angularjs-dropdown-multiselect/
It looks like it's working, but we have not seen any selected sign. When I select from the dropdown box It's look like-
Here is my code,
Angular Directive,
scope.example9model = []; scope.example9data = [{id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"}]; scope.example9settings = {enableSearch: true};
Call from HTML,
<div ng-dropdown-multiselect="" options="example9data" selected-model="example9model" extra-settings="example9settings">
what's the problem there I can't figure out this.

How to add "ALL" as label and totalItems as value in paginationPageSizes select box as adding like [25, 50, 75] in UI-grid using angularjs

I want to add a option like ALL which will display all records in the UI-grid using angularjs, like below
paginationPageSizes: [
{label: "10", value: "10"},
{label: "25", value: "25"},
{label: "All", value: $scope.gridOptions.totalItems}]
You can adjust their optionsdropdown but its not totally smooth. I created a Plunkr showcasing a possible solution.
First you modify the paginationPageSizes object the way you already did
paginationPageSizes: [
{label: '25', value: 25},
{label: '50', value: 50},
],
To add your ALL, you can push that value after getting your data.
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function (data) {
$scope.gridOptions1.data = data;
$scope.gridOptions1.paginationPageSizes.push({label: 'ALL', value: $scope.gridOptions1.data.length});
});
Now comes the tricky part!
You have to modify the options-template to match your new paginationPageSizes object.
$templateCache.put('ui-grid/pagination',
"<div class=\"ui-grid-pager-panel\" ui-grid-pager ng-show=\"grid.options.enablePaginationControls\"><div class=\"ui-grid-pager-container\"><div class=\"ui-grid-pager-control\"><button type=\"button\" ng-click=\"paginationApi.seek(1)\" ng-disabled=\"cantPageBackward()\"><div class=\"first-triangle\"><div class=\"first-bar\"></div></div></button> <button type=\"button\" ng-click=\"paginationApi.previousPage()\" ng-disabled=\"cantPageBackward()\"><div class=\"first-triangle prev-triangle\"></div></button> <input type=\"number\" ng-model=\"grid.options.paginationCurrentPage\" min=\"1\" max=\"{{ paginationApi.getTotalPages() }}\" required> <span class=\"ui-grid-pager-max-pages-number\" ng-show=\"paginationApi.getTotalPages() > 0\">/ {{ paginationApi.getTotalPages() }}</span> <button type=\"button\" ng-click=\"paginationApi.nextPage()\" ng-disabled=\"cantPageForward()\"><div class=\"last-triangle next-triangle\"></div></button> <button type=\"button\" ng-click=\"paginationApi.seek(paginationApi.getTotalPages())\" ng-disabled=\"cantPageToLast()\"><div class=\"last-triangle\"><div class=\"last-bar\"></div></div></button></div><div class=\"ui-grid-pager-row-count-picker\">"+
"<select ng-model=\"grid.options.paginationPageSize\""+
//"ng-init=\"grid.options.paginationPageSize = grid.options.paginationPageSizes[0]\" " +
"ng-options=\"o.value as o.label for o in grid.options.paginationPageSizes track by o.label\">"+
"</select><span class=\"ui-grid-pager-row-count-label\"> {{sizesLabel}}</span></div></div><div class=\"ui-grid-pager-count-container\"><div class=\"ui-grid-pager-count\"><span ng-show=\"grid.options.totalItems > 0\">{{showingLow}} - {{showingHigh}} {{paginationOf}} {{grid.options.totalItems}} {{totalItemsLabel}}</span></div></div></div>"
);
See 4th line where I added the new parse logic.
Now regarding the not easily solved problem. As you can see in the Plunkr, you dont have a default selection this way, because you got an object instead of plain values.
The ng-init block shows what could be done about that but you would need to dig very deep into their sourcecode because the paginationPageSize is used as a plain number in their code and instead we have an object now.
Update: I tried a few setups and it actually worked. Using the options without track by made the difference. See updated Plunkr.
"ng-init=\"grid.options.paginationPageSize = grid.options.paginationPageSizes[0].value\" " +
"ng-options=\"o.value as o.label for o in grid.options.paginationPageSizes\">"+

ng-options not working as expected

I'm having an issue trying to loop through an array of objects using ng-options.
html
<select class="select-width" ng-options="type as type.name for type in types">
js
$scope.types = [{name: "Advanced Yield Analysis"},
{name: "Yield by Hybrid"},
{name: "Yield by planting data"},
{name: "Yield by soil type"},
{name: "Yield by management zone"},
{name: "Yield by population/seeding rate"},
{name: "Yield by Treatment"},
{name: "Total Yield by Grower / Location / MC"}];
Here is a JS-fiddle.
You only need to pass the ng-model. Ng-options will not work when you're not assigning a model.
By default, ngModel watches the model by reference, not value. This is
important when binding any input directive to a model that is an
object or a collection.
try
<select class="select-width" ng-model="demo" ng-options="type as type.name for type in types"></select>
Fiddle

AngularJS filter null key:value row from ngRepeat list - data stored in objects within array

I have my data stored in an array of objects and it is being used to create a list on the page with ngRepeat. The problem is that some of the values within the object are null and I want to hide just their line but not the whole object. I tried using ngHide on the individual <li>'s but it doesn't collapse the row since its just hiding it and I don't really wanna reduce its height to zero through a function or additional css if I can just use the filter to do it automagically.
Despite my best efforts I cannot seem to write a custom filter that will hide the null rows and show the others. I once had it to the point of returning false for the value if null but then I deleted it to try something else and forgot how I had gotten there (ugh no local versioning).
Here is a fiddle from a previous question of mine but it has all the pieces I am trying to filter. http://jsfiddle.net/E2GB9/9/
Format of the data:
function TypeCtrl($scope) {
$scope.styles = [
{name: 'Example 1', h1:'32px', h2:'24px', p:'12px', className:'example1'},
{name: 'Example 2', h1:'', h2:'24px', p:'12px', className:'example2'},
{name: 'Example 3', h1:'24px', h2:'', p:'12px', className:'example3'},
{name: 'Example 4', h1:'32px', h2:'24px', p:'', className:'example4'}];
}
ngRepeat in the html:
<li ng-repeat="style in styles">
<span>Name: {{style.name}}</span><br>
<span>H1: {{style.h1}}</span><br>
<span>H2: {{style.h2}}</span><br>
<span>P: {{style.p}}</span><br>
<button class="btn-small" type="submit" ng-click="$parent.appliedStyle=style.className">Apply {{style.name}}</button>
</li>
So, if style.h1 == null then I want to hide that row only; same for h2, p and so on.
The reason ng-hide does not collapse the row is the <br> that follows every <span> element. It would work, if you wrote instead:
<p ng-hide="!style.h1">H1: {{style.h1}}</p>
(and no <br>)
It can also be a <div> instead of a <p> (or any block element, or style the <span> as display:block to force a new line).
You Can use custom filter with ng-repeat.
function TypeCtrl($scope) {
$scope.styles = [
{name: 'Example 1', h1:'32px', h2:'24px', p:'12px', className:'example1'},
{name: 'Example 2', h1:'', h2:'24px', p:'12px', className:'example2'},
{name: 'Example 3', h1:'24px', h2:'', p:'12px', className:'example3'},
{name: 'Example 4', h1:'32px', h2:'24px', p:'', className:'example4'},
{}];
$scope.checkNull = function(row) {
return (row.hasOwnProperty('name') || row.hasOwnProperty('h1')
|| row.hasOwnProperty(' ') || row.hasOwnProperty('p') );
}
}
In place of row.hasOwnProperty(), you can also use underscore and check on size of the object.
This will not show the last row since it is blank.
ng-Repeat in html
<ul class="unstyled">
<li ng-repeat="style in styles | filter:search | filter:checkNull">
<span>Name: {{style.name}}</span><br>
<span>H1: {{style.h1}}</span><br>
<span>H2: {{style.h2}}</span><br>
<span>P: {{style.p}}</span><br>
<button class="btn-small" type="submit" ng-click="$parent.appliedStyle=style.className">Apply {{style.name}}</button>
</li>
</ul>

Resources