AngularJS：将字符串拆分为数组，获取第一个元素答案

【问题标题】：AngularJS: Splitted string as array, get first elementAngularJS：将字符串拆分为数组，获取第一个元素
【发布时间】：2014-02-27 03:31:31
【问题描述】：

可能这是一个愚蠢的问题，但我无法真正摆脱它。在 AngularJS webapp 中，我使用过滤器拆分了从我无法修改的 JSON 中获得的字符串：现在整个字符串（日期+小时）被分成一个由 2 个元素组成的数组（数组 [0]=日期，数组[1]=hour)，但我不知道如何只获取 HTML 中的第一个。

我不能将单个元素作为范围传递，也不能使用 ng-repeat，因为我必须为每个元素分配不同的类。

HTML：

<span class="time">{{manif.avvenimento.data | split:' '}}</span>

以 HTML 格式打印的结果：

["03/02/2014","20:40"]

我需要这样的东西：

<span class="A">03/02/2014</span>
<span class="B">20:40</span>

谢谢大家！

【问题讨论】：

标签： javascript html arrays angularjs scope

【解决方案1】：

我会将这两个字符串放在一个单独的对象中。这样您就不会在每个摘要周期都执行字符串拆分，这对性能更好。

在您的控制器中：

$scope.timestamp = {
    'date': '',
    'time': ''
}

$scope.$watch(manif.avvenimento.data, function (newValue, oldValue) {
    $scope.timestamp.date = ... // Place the date here
    $scope.timestamp.time = ... // Place the time here
});

在您的 HTML 中：

<span class="time">{{timetamp.time}}</span>
<span class="date">{{timetamp.date}}</span>

【讨论】：

正如我所说，我不能使用范围修改字符串，因为它是由我需要重复的元素组成的更大范围的一部分。
@peppeuz：你不能改变范围吗？所选答案的缺点是每次对范围进行脏检查时都会执行两次拆分，这在 Angular 中经常发生。这会减慢应用程序的速度，尤其是当您将其与 ng-repeat 结合使用时。我的回答没有回答您的具体问题，但请记住，如果您的应用程序开始运行缓慢。有关摘要和性能的更多信息：stackoverflow.com/a/9693933/179024

【解决方案2】：

很可能会这样做：

<span class="date">{{ (manif.avvenimento.data | split:' ')[0] }}</span>
<span class="time">{{ (manif.avvenimento.data | split:' ')[1] }}</span>

【讨论】：

谢谢，成功了！ :) 我试图使用 ng-if="$index==0" 等等，但你的解决方案正是我所需要的。我不能希望它会以这种方式工作:)

【解决方案3】：

要从后端获取 JSON 数组，请将以下内容添加到 AngularJS 控制器：

var dtRes = $resource('URL to your resource object');
$scope.dtArr = dtRes.query();

然后在你的 HTML 中使用：

<li data-ng-repeat="dt in dtArr">
    <span>{{dt.date}} {{dt.time}}</span>
</li>

【讨论】：