Blog

Is there a way I could shorten this in angular js [Answered]RSS

5 replies

Last post Jun 28, 2017 04:31 AM by asplearning

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
asplearning
Member

419 Points

1787 Posts
Is there a way I could shorten this in angular js

Jun 22, 2017 02:20 AM|asplearning|LINK
Hello everyone I have this line of code:
```
<textarea id="textarea1" ng-model="blocks[blockSelected].rows[rowSelected].label"></textarea>
```
Blocks and rows are arrays. A block contains many rows. I am just trying to see if there is a way I can assign
```
blocks[blockSelected].rows[rowSelected]
```
to something like selectedRow.label for readability.

Thanks.
- Reply
JBetancourt
Participant

1370 Points

608 Posts
Re: Is there a way I could shorten this in angular js

Jun 22, 2017 03:23 AM|JBetancourt|LINK
```
$scope.model = {
   blocks: [
       {  
           rows: [ 
               { label: 'the label' }
           ]
       }
  ],
  selectedBlock: undefined,
  selectedRow: undefined
}
```
on the block selection fill the selectedBlock property
```
<div ng-repeat="block in model.blocks" ng-click="model.selectedBlock=block;model.selectedRow=undefined"> 
```
on the row selection fill the selectedRow property
```
<div ng-if="model.selectedBlock">
     <div ng-repeat="row in model.selectedBlock.rows" ng-click="model.selectedRow=row"> 
```
then your text area can be binded to selectedRow.label
```
<div ng-if="model.selectedRow">
    <textarea ng-model="model.selectedRow.label">
```
I added everything inside $scope.model instead of putting everything directly on $scope as this is best practice, believe me it will save you from some headaches, when you have to deal with some directives redefining the current scope.
-----------------
Please remember to click "Mark as Answer" the responsES that resolved your issue.
- Reply
asplearning
Member

419 Points

1787 Posts
Re: Is there a way I could shorten this in angular js

Jun 22, 2017 03:56 AM|asplearning|LINK
Thank you JBetencourt. This gives me an idea. My issue is with these lines:
```
<div ng-if="model.selectedBlock">
     <div ng-repeat="row in model.selectedBlock.rows" ng-click="model.selectedRow=row">
```
For me on page load, I need to bind everything and not just the selectedBlock so it is like this:
```
<div ng-repeat="row in model.blocks.rows" ng-click="model.selectedRow=row">
```
I am not sure how selectedRow could locate the right row since ng-repeat doesn't just happen in selectedBlock only. ng-repeat happens to all rows in all blocks.

Thanks.

JBetancourt

Participant

1370 Points

608 Posts

Re: Is there a way I could shorten this in angular js

Jun 22, 2017 01:17 PM|JBetancourt|LINK

my solution was assuming the 2 repeats where separated: show list of blocks, select one, then show the list of rows for that block in a separated repeat, select one, then display the textarea to edit the label.

<div ng-repeat="block in model.blocks" ng-click="model.selectedBlock=block;model.selectedRow=undefined" >
</div>

<div ng-if="model.selectedBlock">
     <div ng-repeat="row in model.selectedBlock.rows" ng-click="model.selectedRow=row"> 
	 </div>
</div>

<div ng-if="model.selectedRow">
    <textarea ng-model="model.selectedRow.label"></textarea>
</div>

If you want nested repeats then you have the option to show also nested inputs or have only one input outside.

Lets assume you have nested repeats and the input outside:

<div ng-repeat="block in model.blocks" ng-click="model.selectedBlock=block"> 
      <div ng-repeat="row in block.rows" ng-click="model.selectedRow=row"> 
	  </div>
</div>

<div ng-if="model.selectedRow">
    <textarea ng-model="model.selectedRow.label"></textarea>
</div>

if you want nested textareas you can do:

<div ng-repeat="block in model.blocks" ng-click="model.selectedBlock=block"> 
      <div ng-repeat="row in block.rows" ng-click="model.selectedRow=row"> 
	       <textarea ng-model="row.label"></textarea>
	  </div>
</div>

-----------------
Please remember to click "Mark as Answer" the responsES that resolved your issue.

- Reply
asplearning
Member

419 Points

1787 Posts
Re: Is there a way I could shorten this in angular js

Jun 27, 2017 02:59 AM|asplearning|LINK
JBetancourt, thanks for your reply again. I ran into one issue. Is there a way I can create a variable row without going through ng click. I actually selected the row in another way and selectedRow is not undefined. All I need is to some how assign the model.selectedRow = row.
```
<div ng-repeat="row in model.selectedBlock.rows" ???="model.selectedRow=row"> 
	 </div>
```
Thanks.
- Reply
asplearning
Member

419 Points

1787 Posts
Re: Is there a way I could shorten this in angular js

Jun 28, 2017 04:31 AM|asplearning|LINK
I just realized I could do this in angular js in html markup page itself
```
{{row=model.selectedRow;""}}
  <%--Start calling row this way --%>
    <ul ng-show="row != undefined">
```
Hope it helps others too

‹ Previous Thread|Next Thread ›