使用Angular JS检索表输入值

Question

我有一个带有输入字段和两个可点击图像的表，我想使用Angular JS从该表中检索数组值。

feedback.html

<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>

controller.js

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)
    }
});

我的表格结构如下：

如果用户单击第一条消息的相似图像并且不喜欢第二条和第三条消息，我想获取以下JSON对象：

'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

尝试将HTML更改为：

<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>

然后你可以像这样制作所需的物体：

的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
  };
}

示例输出：

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

这样做

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