Question

您好我是angularjs的新手并且在点击提交按钮期间尝试调用函数。

我的HTML页面

<div class="form-group">
                    <a href="#" ng-click="showGraph = !showGraph" class="btn btn-primary btn-lg" ng-disabled="!model.selectedRole">SUBMIT</a>
                    </div>
            </form>
        </div>  
    </div><! end of previous div -->

<div class="col-sm-6"> <!-- new div -->
            <div class="panel panel-primary"> 
                <div class="panel-heading" style="background-color:#F8F8FF; text-decoration:none; color:black"><b>Chart</b></div>
                <div class="panel-body" ng-change="HeadCount()" ng-show="showGraph">

          <plot class="barchart" height="300" width="400" yaxis-label-text="'No. of Students'"
                          xaxis-label-text="'standards'" ymin="0" ymax="100" xodomain="ordinals" >
                        <bar-group  type="'grouped'" arrangement="'vertical'" style="opacity:100;">
                            <bars  data="available_students" position-function="'/0'" value-function="'/1'"
                                  fill="'red'"></bars>
                            <bars data="maximum_students" position-function="'/0'" value-function="'/1'" fill="'blue'" ></bars>
                        </bar-group>

                    </plot>
                </div>

          </div>
           </div> <!-- end of new div -->

这里我使用ng-click="showGraph = !showGraph"在我的控制器中调用我的showGraph。

我的控制器页面

$scope.showGraph = false;

 $scope.HeadCount = function(){

            var json_response =  {

                      "data": [
                        {
                          "standard": "Ist",
                          "max_students": 20,
                          "available_students": 8
                        },
                        {
                          "standard": "IInd",
                          "max_students": 15,
                          "available_students": 10
                        },
                        {
                          "standard": "IIIrd",
                          "max_students": 50,
                          "available_students": 22
                        }
                      ]
                    } 
     $scope.available_students = [ ['Ist', 8,], ['IInd', 10], ['IIIrd', 22]];
     $scope.maximum_students = [['Ist', 15], ['IInd',15], ['IIIrd', 50]];
     $scope.ordinals = ['Ist', 'IInd', 'IIIrd'];
     console.log($scope.ordinals.length);
     $cookieStore.put('xaxisLength',$scope.ordinals.length);

    }

我需要在点击提交按钮后从控制器调用HeadCount()函数来显示图表。

但我收到以下错误，当我点击提交按钮表单时会刷新。

Error: [$compile:ctreq] Controller 'ngModel', required by directive 'ngShow', can't be found!

任何人都可以帮助我，我需要做出改变。

Answer 1

ng-change指令需要ng-model指令。在此行添加ng模型：

<div class="panel-body" ng-change="HeadCount()" ng-show="showGraph">

了解更多here

Answer 2

点击a。

设置$scope.showGraph和图形渲染代码

从div下方乘坐ng-change。

<div class="panel-body" ng-show="showGraph">

HTML：将renderGraph添加到ng-click。

<a href="#" ng-click="renderGraph()" class="btn btn-primary btn-lg" ng-disabled="!model.selectedRole">SUBMIT</a>

JS：在此处设置$scope.showGraph。

  $scope.renderGraph = function(){
    $scope.showGraph = !$scope.showGraph;
    if($scope.showGraph) {
        var json_response =  {
          "data": [
            {
              "standard": "Ist",
              "max_students": 20,
              "available_students": 8
            },
            {
              "standard": "IInd",
              "max_students": 15,
              "available_students": 10
            },
            {
              "standard": "IIIrd",
              "max_students": 50,
              "available_students": 22
            }
          ]
        };
         $scope.available_students = [ ['Ist', 8,], ['IInd', 10], ['IIIrd', 22]];
         $scope.maximum_students = [['Ist', 15], ['IInd',15], ['IIIrd', 50]];
         $scope.ordinals = ['Ist', 'IInd', 'IIIrd'];
         console.log($scope.ordinals.length);
         $cookieStore.put('xaxisLength',$scope.ordinals.length);
    }

};

Answer 3

在ng-show指令更改时无法调用

ng-change。只有当绑定元素发生变化时才会调用它。因此，您需要使用ng-model将ng-change放在input元素中的某个位置。

在您的情况下，您需要在此行中调用HeadCount（）

<a href="#" ng-click="HeadCount(); showGraph = !showGraph" class="btn btn-primary btn-lg"           ng-disabled="!model.selectedRole">SUBMIT</a>

我希望这会有所帮助。

错误：[$ compile：ctreq]无法找到指令'ngShow'所需的控制器'ngModel'

3 个答案: