Angular:使用ng-click自动填充/更改存储在ng-grid内的数据

时间:2015-01-26 18:17:26

标签: javascript angularjs ng-grid angularjs-ng-click

我是棱角分明的新人。我有一个带有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;
}

1 个答案:

答案 0 :(得分:0)

您可以从ng-click

致电span指令
<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';}

      }

  })

请参阅 working js fiddle