使用角度JS中的ng-options在输入字段中输入数据

时间:2016-05-04 10:48:16

标签: angularjs

我的角度js控制器中有以下数组 -

    $scope.Data = [

    {Day: 'Monday', Start: '10.00', Finish: '15.30'},
    {Day: 'Tuesday', Start: '10.00', Finish: '16.30'},
    {Day: 'Tuesday', Start: '10.00', Finish: '12.30'},

    ]
$scope.overTime = 0;

在我看来,我正在循环遍历这个数组:

  <div ng-repeat="a in Data track by $index">
   <strong> {{a.Day}}
   <input ng-model="a.Start"/>
   <input ng-model="a.Finish/>
   <span> Add over Time </span>
   <input type=""text" placeholder="Add overtime" ng-model="addovertime"\>

  </div>

一切都按预期工作正常,但我唯一的问题是添加加班输入字段。正如你在我的代码中看到的那样,用户可以在任何一天添加一些加班时间问题,例如,如果我需要为星期一添加加班,我在周一加班输入文件中输入的任何内容也会出现在星期二和星期三的加班反之亦然。这是因为我在加班时绑定数据?也许我不是很确定,但我将如何实现呢? 谢谢

2 个答案:

答案 0 :(得分:3)

那是因为你将加班存储在范围变量中,而不是每个数据项。要为每件商品单独存储加班费,请执行以下操作:

<input type="text" placeholder="Add overtime" ng-model="a.overtime">

答案 1 :(得分:1)

通过这个,每个加班创建单独的范围

&#13;
&#13;
var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
      $scope.Data = [

    {Day: 'Monday', Start: '10.00', Finish: '15.30'},
    {Day: 'Tuesday', Start: '10.00', Finish: '16.30'},
    {Day: 'Tuesday', Start: '10.00', Finish: '12.30'},

    ];
    $scope.overTime = 0;
});


 
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
  <div ng-repeat="a in Data track by $index">
   <strong> {{a.Day}}</strong>
   <input ng-model="a.Start"/>
   <input ng-model="a.Finish"/>
   <span> Add over Time </span>
   <input type="text" placeholder="Add overtime" ng-model="a.addovertime" >

  </div>
</div>
&#13;
&#13;
&#13;