AngularJS 句子和字数的双向数据绑定

Question

在一家公司的面试过程中，我被分配去解决 coding exercise 除了 Words Count 部分我做了。这导致拒绝进一步的面试过程。

现在我正在尝试计算字数，但不知道我是否做对了。所以请根据给定的问题向我建议计算 AngularJs 中单词数的最佳方法？

谢谢

<!DOCTYPE html>
<html ng-app="plunker">
<head>
  <title>Agenus</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>

  <div ng-controller="MainController as mainVm">
    <div class="container">

      <div id="heading">
        <h3 id="header">Photo Data from JSON Endpoint</h3>
      </div>
      <div class="row">
        <div class="col-sm-9">

          <table class="table">
            <thead>
            </thead>
            <tbody>
              <tr ng-repeat="photo in mainVm.photos" id="trow">
                <td><img src={{photo.url}} class="img-responsive" alt="imgg" width="300" height="300"></td>
                <td>
                  <div id="count">{{photo.title.length}}</div>
                </td>
                <td id="elem">{{photo.title}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>
  <script src="https://code.angularjs.org/1.4.9/angular.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <style type="text/css">
    .container {
      background-color: #F5F5F5;
      padding-top: 25px;
    }

    #heading {
      margin: 0 auto;
      text-align: left;
      background-color: #9E9E9E;
      padding-top: 25px;
      padding-bottom: 25px;
      border-radius: 10px;
      width: 850px;
      float: left;
    }

    #header {
      text-align: left;
      padding-left: 20px;
      color: #FAFAFA;
    }

    #count {
      border: 1px solid black;
      border-radius: 5px;
      background-color: #E0F2F1;
    }

    #trow {
      background-color: #FFFFFF;
    }
  </style>
  <script>
    (function() {
      'use strict';

      angular
        .module('plunker', [])
        .controller('MainController', MainController);


      function MainController($http) {
        var mainVm = this;

        var query = {
          albumId: 1
        };

        $http({
            method: 'GET',
            url: 'http://jsonplaceholder.typicode.com/photos',
            params: query
          })
          .then(successFn, errorFn);

        function successFn(response) {
          mainVm.photos = response.data;
        }

        function errorFn(response) {
          console.log(response.status);
        }
      }
    })();
  </script>


</body>

</html>

Answer 1

添加带有单个白色参数的 split 方法 space 会将您的字符串拆分为单词数组。从那里询问长度，你就会得到一个字数。

以下是检索此内容的几种方法之一：

<td>{{user.title.length}}</td>
<td>{{user.title.split(" ").length}}</td> //Add this line
<td>{{user.title}}</td>

我想强调的是，这不一定是 "correct" 的方法。但考虑到您的应用程序的当前结构，这是最简单的方法。

AngularJS 句子和字数的双向数据绑定

AngularJS two way data binding of a sentence and word count

javascript

word-count

angularjs

plunker