角度：使用ng-click自动填充/更改ng-grid中存储的数据

Question

我是新手。 我有一个带有ng-grid的简单页面，显示了日期和时间。 这个想法是驾驶员在页面上，并且可以在每个时间段单击是否有时间自愿驾驶（Y或N）。

当前，您可以单击一个框并手动编辑该框。 我正在查看是否有一种方法，您可以单击一个框并使其在“ Y”和“ N”之间自动切换，而不是能够编辑框内的任何内容。 这是我的文件：

---

index.html的：

<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Driver Scheduler</title>  
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
     <section data-ng-controller="myCtrl">
        <br>
        <p>Driver:
        <select ng-model="atcStatusTasks" ng-options="s.name for s in statusTaskList"></select>
         <button>Save</button></p>
         <br>
    </section>
    <section ng-controller="MyCtrl">
      <div class="gridStyle" ng-grid="gridOptions"></div>

    </section>


    </body>
</html>

---

main.js：

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
    $scope.myData = [
        { time: "8:00am", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "8:15am", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "8:30am", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "8:45am", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "9:00am", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "9:15am", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "9:30am", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "9:45am", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "10:00am", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "10:15am", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "10:30am", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "10:45am", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "11:00am", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "11:15am", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "11:30am", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "11:45am", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "12:00pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "12:15pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "12:30pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "12:45pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "1:00pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "1:15pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "1:30pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "1:45pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "2:00pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "2:15pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "2:30pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "2:45pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "3:00pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "3:15pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "3:30pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "3:45pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "4:00pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "4:15pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "4:30pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "4:45pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "5:00pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "5:15pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "5:30pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "5:45pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "6:00pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "6:15pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "6:30pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "6:45pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "7:00pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "7:15pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "7:30pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "7:45pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" },
        { time: "8:00pm", monday: "N", tuesday: "N", wednesday: "N", thursday: "N", friday: "N" }

    ],

    $scope.gridOptions = {
        data: 'myData',
        enableCellSelection: true,
        enableCellEdit: true,
        enableRowSelection: false,
        enableSorting: false,
        columnDefs: [{ field: 'time', displayName: 'Time Slot', enableCellEdit: false }, { field: 'monday', displayName: 'Monday' }, { field: 'tuesday', displayName: 'Tuesday' }, { field: 'wednesday', displayName: 'Wednesday' }, { field: 'thursday', displayName: 'Thursday' }, { field: 'friday', displayName: 'Friday' }]
    };
});
app.controller('myCtrl', function ($scope) {
    $scope.statusTaskList = [
       { name: 'Chad Hall', value: '1' },
       { name: 'Wesley Woo', value: '2' },
       { name: 'Ariel Ayya', value: '3' },
       { name: 'Nathan Non', value: '4' },
    ];
    $scope.atcStatusTasks = $scope.statusTaskList[0]; // 0 -> Open 

});

---

style.css中：

/*style.css*/
.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 600px; 
    height: 300px;
    text-align: center;
}

---

Answer 1

您可以从span调用ng-click指令

<span  ng-click="change()">{{val}}</span>

在控制器中，您可以如下定义功能

调节器

.controller("Ctrl1", function($scope, $element)
  {
      $scope.val='N';
      $scope.change = function() {
         if($scope.val==='N')
            {$scope.val='Y';}
            else{
            $scope.val='N';}

      }

  })

看到工作的js提琴