如何从ng-repeat循环的input中获取ng-model绑定的media.duration值？

其实你根本不用特意去“获取”input对应的ng-model值——因为AngularJS的双向数据绑定已经帮你做好了！当用户在输入框里修改时长时，medias数组中对应的media.duration会自动同步更新。

具体处理方式分两种情况： #

1. 想获取所有媒体的自定义时长（按钮在ng-repeat外面）

如果你的按钮是在ng-repeat循环外面（就像你代码里写的那样），直接在getInputValue函数里访问$scope.medias就行，数组里每个对象的duration就是输入框的最新值：

app.controller('MyCtrl', function($scope) {
  $scope.medias = []; // 你的媒体数组，从其他列表推入数据

  $scope.getInputValue = function() {
    // 遍历medias数组，就能拿到所有最新的duration
    $scope.medias.forEach(function(media) {
      console.log(`${media.title}的时长：${media.duration}`);
    });
    // 如果需要把所有时长收集成数组，也可以这样：
    const allDurations = $scope.medias.map(media => media.duration);
    console.log('所有媒体时长：', allDurations);
  };
});

对应的HTML按钮部分改成：

<button ng-click="getInputValue()">获取所有媒体时长</button>

2. 想获取单个媒体的时长（按钮在ng-repeat里面）

如果想给每个媒体项单独加一个按钮，获取当前项的时长，那可以把media作为参数传给函数：

HTML部分：

<div ng-repeat="media in medias">
  <span>{{media.title}}</span><br>
  <input ng-model="media.duration" /><br>
  <button ng-click="getSingleDuration(media)">获取当前时长</button><br><br>
</div>

控制器里的函数：

$scope.getSingleDuration = function(media) {
  console.log(`${media.title}的当前时长：${media.duration}`);
  // 这里的media就是当前ng-repeat循环里的对象，它的duration已经是输入框的最新值
};

小提示 #

如果发现数据没同步，先检查：

• 推入medias数组的媒体对象是不是可被AngularJS监控的——如果是从外部（比如API返回的对象）直接推入，确保它是普通JavaScript对象，不是不可扩展的特殊对象。
• 输入框的ng-model有没有正确绑定到media.duration，有没有拼写错误。

内容的提问来源于stack exchange，提问作者Arter