Retrieve table input values using Angular JS

Question

I have a table with an input field and two clickable image, I want to retrieve the array values from this table using Angular JS.

<table class="display table" id="logTable">
                        <thead>
                        <tr>
                            <th>Message</th>
                            <th>Score</th>
                            <th>Tags</th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr ng-repeat="log in logProd">
                            <td>{{ log.message }}</td>
                            <td class="score_tag">
                                <div ng-click="onClick('1', log.message, log.tags)"><img src="../../images/buttons/like-icon.png"></div>
                                <div ng-click="onClick('0', log.message, log.tags)"><img src="../../images/buttons/dislike-icon.png"></div>
                            </td>
                            <td>
                                <input type="text" class="form-control" ng-model="log.tags" placeholder="Tags">
                            </td>
                        </tr>
                        </tbody>
                    </table>

var app = angular.module('logAnalysisApp', []);
app.controller('logFeedbackController', function($scope) {
    $scope.logProd = [{
        message : 'test',
    },
    {
        message : 'test2',
    },
    {
        message : 'test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3',
    }];

    $scope.onClick = function onClick(option,message,tags){
        console.log(option);
        console.log(message);
        console.log(tags);
    };

    $scope.update = function(){
        console.log("update the model");
        var entries = [];
        angular.forEach($('#logTable').children()[1].children, function(tr){
            //$('#like').css('opacity',0.5);
            var entry = [];
            angular.forEach(tr.children,function(td){
                entry.push(td.innerHTML);
            });
            entries.push(entry);
        })
        console.log(entries);
    };

    $scope.loadEvents = function(eventsNumber){
        console.log("load events");
        console.log(eventsNumber)
    }
});

My table has the following structure :

If the user click on the like image for the first message and dislike the second and the third one, I want to get the following JSON object :

'message':{
   '0' :
     {
        'message' : 'test',
        'score' : 1,
        'tags' : 'Tag 1'
     },
   '1':
     {
        'message' : 'test 2',
        'score' : 0,
        'tags' : 'Tag 2'
     },
   '2':
     {
        'message' : 'test3 test3 test3 test3 test3',
        'score' : 0,
        'tags' : 'Tag 3'
     }
}

Answer 1

Try changing you HTML to this:

<td>{{ log.message }}</td>
<td class="score_tag">
  <div ng-click="log.score = 1"><img src="../../images/buttons/like-icon.png"></div>
  <div ng-click="log.score = 0"><img src="../../images/buttons/dislike-icon.png"></div>
</td>
<td>
  <input type="text" class="form-control" ng-model="log.tags" placeholder="Tags">
</td>

Then you can make the desired object like this:

JavaScript

var message = {};
for(var i = 0; i < $scope.logProd.length; i++) {
  var log = $scope.logProd[i];
  message[i] = {
    message: log.message,
    score: log.score,
    tags: log.tags
  };
}

Example output:

var logProd = [
    {
    'message': 'test',
    'score': 1,
    'tags': 'Tag 1'
  },
  {
    'message': 'test 2',
    'score': 0,
    'tags': 'Tag 2'
  },
  {
    'message': 'test3 test3 test3 test3 test3',
    'score': 0,
    'tags': 'Tag 3'
  }
]

var message = {};
for(var i = 0; i < logProd.length; i++) {
  var log = logProd[i];
  message[i] = {
    message: log.message,
    score: log.score,
    tags: log.tags
  };
}

console.log(JSON.stringify(message, null, 2));
//Gives this result:
{
  "0": {
    "message": "test",
    "score": 1,
    "tags": "Tag 1"
  },
  "1": {
    "message": "test 2",
    "score": 0,
    "tags": "Tag 2"
  },
  "2": {
    "message": "test3 test3 test3 test3 test3",
    "score": 0,
    "tags": "Tag 3"
  }
}

Answer 2

Do like this

ng-click="log.score = 1; like =true" ng-disabled="like === true"
ng-click="log.score = 0; dislike = true" ng-disabled="dislike = true"