使用输入字段

时间:2016-06-30 11:03:52

标签: javascript angularjs

我想创建一个带有两个输入字段的html表,第一个由用户点击时的2个图像组成,我得到1或0,第二个输入是文本字段。

feedback.html

<body ng-controller="logFeedbackController">
    <!-- LOG feedback table -->
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="col-md-12">
                <table class="display table">
                    <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>
                            <div><img src="../../images/buttons/like-icon.png"></div>
                            <div><img src="../../images/buttons/dislike-icon.png"></div>
                        </td>
                        <td>
                            <input type="text" placeholder="Tags">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

controller.js

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

app.js

angular.module('logAnalysisApp',[
    'logFeedbackController'
]);

例如,如果用户喜欢第一条消息并且不喜欢第二条消息,我想检索以下json对象:

'object':{
'0': 
    {
        message : 'test',
        score : 1,
        tags : 'First tags input text values'
    },
'1':
   {
      message : 'test2',
      score : 0,
      tags : 'Second tags input text values '
  }
}

1 个答案:

答案 0 :(得分:0)

您可以向控制器$scope.onClick = function onClick(option) {...}添加新功能,然后使用ngClick https://docs.angularjs.org/api/ng/directive/ngClick为该元素注册click事件。您可以添加<div ng-click="onClick('like')...<div ng-click="onClick('dislike')....

对于文本输入,您需要将其链接到模型,您可以使用ngModel,查看https://docs.angularjs.org/api/ng/input/input%5Btext%5D。您可以添加范围变量$scope.tags,然后添加<input ng-model="tags" ....

你应该可以从这里继续:)(我希望我能正确理解你的问题)