send value to controller in angularjs and return array

Question

I want send cod to controller and return array

When pressing a li you have to send a code to the controller, in this case I am setting the example 7. Once the code has arrived at the controller I will have a list that I have to show in a ng-repeat in table

SCRIPT

<script type="text/javascript">

    var app = angular.module('myApp', [])

    app.value('studentInfo', [
      { id: 1, name: 'Mahedee Hasan', credit: 20, semester: '8th' },
      { id: 3, name: 'Enamul Haque', credit: 15, semester: '7th' }
    ]);

    app.controller('myCtrl', ['$scope', 'studentInfo', function ($scope, studentInfo, $http, $window) {
        $scope.myClickList = function () {
            $scope.studentInfo = studentInfo;
        };

        var Cod = "7";
        $scope.myDataCountry = [];
        $scope.ButtonCountry = function (Cod) {
            $http.
                post("/Country/Angular", { CodH: Cod }).success(function (result) {
                $scope.myDataCountry = result;
            });
        };

    }]
  );
</script>

VIEW

<li><a data-toggle="tab" href="#calificaciones" ng-click="ButtonCountry ()"><span>Country</span></a></li>


    <div ng-app="myApp" ng-controller="myCtrl">
<table class="table">
    <tr>
        <th>ID</th>
        <th>Country</th>
    </tr>
    <tr ng-repeat="C in myDataCountry">
        <td>{{C.ID}}</td>
        <td>{{C.Country}}</td>
    </tr>
</table>
    </div>

CONTROLLER

    public JsonResult Angular(string codCountry)
    {

        var country = (from a in dbCountry.Country
                         where a.CodPersona == codCountry
                         select a.Country).ToList();

        return Json(country , JsonRequestBehavior.AllowGet);
    }

I tried this and to

The `ng-click` is on an element that is outside the scope of the controller. The inline array annotation of the controller doesn't match the dependency injection. — georgeawg, May 08 '18 at 16:49
The `.success` method is [deprecated and removed from V1.6](https://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6/35331339#35331339). — georgeawg, May 08 '18 at 16:51
What is the name of your MVC Controller? Is it CountryController? — Rani Radcliff, May 15 '18 at 01:49

Munzer · Answer 1 · 2018-05-08T17:02:11.240

First, your li element isn't inside your app directive, which means it will not detect the function, you need to make sure that your li element is within the app scope

<!-- li is outside the scope --> 
<li><a data-toggle="tab" href="#calificaciones" ng-click="ButtonCountry(1)"><span>Country</span></a></li>
    <div ng-app="myApp" ng-controller="myCtrl">
<!-- end --> 

<!-- li is within the scope --> 

    <div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li><a data-toggle="tab" href="#calificaciones" ng-click="ButtonCountry(1)"><span>Country</span></a></li></ul> 
<!-- end -->

of course, you need to alter your html elements, meaning ul parent of the li most be included as well.

your Action url is wrong, your controller shows that action name is CalificacionesAngular but you are using Angular for some reason, another thing I notice you never passed the code to your function which means this

ng-click="ButtonCountry ()" 
 //should be this 
ng-click="ButtonCountry('thecode')"

and the data you are posting isn't similar to the parameter name, you have to change this

post("/Country/Angular", { CodH: Cod })
//to this 
post("/Country/CalificacionesAngular", { codCountry: Cod })

there might be some more issues, these are the one I could see so far, please debug and provide more details about the error you are getting. A good example you can check as well is this and this, and I suggest reading about Directives, Binding, scope, and Events

The `ng-click` is on an element that is outside the scope of the controller. The inline array annotation of the controller doesn't match the dependency injection. — georgeawg, May 08 '18 at 16:50

send value to controller in angularjs and return array

1 Answers1