Codelife Codelife - 5 months ago 10
CSS Question

Use showType in AngularJS

I have a program using AngularJS (plnkr link included) which is showing data from JSON. I want to use

showType
to display one screen to another screen.

Plnkr link :- http://plnkr.co/edit/6gSTwOd2tSiw1rXuOCXg?p=preview

JSON structure :-

{
"1": {
"venture": "XYZ Informatics",
"member": [
{
"name": "abcd",
"email": "abcd@gmail.com"
}
],
"message": "This is good day",
"isclicked": true
},
"2": {
"venture": "BBC Informatics",
"member": [
{
"name": "xyz",
"email": "xyz@gmail.com"
}
],
"message": "This is bad day",
"isclicked": false
}
}


It is showing output :-

XYZ Informatics
BBC Informatics


It is also giving the background color of table row red and green by checking
"isclicked": false
and
"isclicked": true


There is another one
div data-show
. I want to make the table row clickable. If I click the
XYZ Informatics
then it will call the
div data-show
and will display the data of XYZ Informatics, next window will look like,

abcd
This is good day


There is a button 'Back'. After clicking on button, we will come back to the previous screen (the listing data) and the color of the background color selected row will be vanished when it comes back.

Answer

here is a start to show you how you can accomplish showing different data based on clicking a row.

 <table ng-hide="nextData.isclicked" style="width:100%">
    <tbody>
      <tr ng-repeat="data in datas">

          <td ng-style="getColor(data)">
            <a href="#" ng-click="data.isclicked = true; $parent.nextData = data">{{ data.venture }}
            </a>
          </td>

      </tr>
    </tbody>
  </table>

  <div ng-if="nextData.isclicked" class="data-show">
    <ul>
      <li> {{ nextData.member[0].name }} </li>
      <li> {{ nextData.message }}</li>
    </ul>
    <button ng-click="nextData.isclicked = false; nextData = {};">Back</button>
  </div>
</div>

link to updated plunker http://plnkr.co/edit/z86eie7Zfa5zDAK4FhA2?p=preview

Comments