Angular：使用ng-click自动fill/change存储在ng-grid中的数据

Question

我是 angular 的新手。我有一个带有显示日期和时间的 ng-grid 的简单页面。这个想法是 driver 在页面上，可以点击每个时间段，无论他当时是否有空参加志愿驾驶（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

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

      }

  })

参见 working js fiddle

Angular：使用ng-click自动fill/change存储在ng-grid中的数据

Angular: Use ng-click to auto fill/change data stored inside ng-grid

javascript

angularjs

ng-grid

angularjs-ng-click