Having trouble in implementing the MVC DropdownList for with angular ng-options

9 views
Skip to first unread message

CE

unread,
Mar 20, 2017, 4:38:44 AM3/20/17
to Angular and AngularJS discussion
Dear All,

I am using angularjs with MVC 5 . Trying to bing the dropdownlist for using the angularjs which is failing. Below is the code ,  help in resolving the issue asap.

Index.cshtml File:- ************************** starts here *************
<div ng-app="MVCAngularAPP">
<div class="col-sm-3" ng-controller="TestController">
    <div class="form-group btn-multy-select">
        <label for="location-select">Lab Location/City</label>
 @Html.DropDownListFor(m => m.test, new List<SelectListItem>(), new
            {
                @multiple = "multiple",
                @ng_multiple = "true",
                @placeholder = "Locations",
                @class = "form-control",
                @id = "usercreatedLabLocation",
                @ng_options = "loc as loc.label for loc in TestData track by loc.id",
                @ng_Model = "User.MappedUserLocations",
                tabindex = 0
            })

    </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('#usercreatedLabLocation').multiselect({
            includeSelectAllOption: true
        });
    });
</script>
*****************************cshtml ends here ***************************

Index.js ************************starts here ******************************

app.controller('TestController', ['$scope', '$http', function ($scope, $http) {
    debugger;
    $scope.TestData = [];
    $http({
        method: "GET",
        url: $('#TestGetActionURL').val(),
    }).then(function mySucces(response) {
        debugger;
        angular.forEach(response.data, function (value, index) {
            $scope.TestData.push({ id: value.ID, label: value.Name });
        });
        debugger;
    }, function myError(response) {
        debugger;
        return response;
    });

}]);
*************************************Index.js ends here *******************
HomeController.cs *****************************Starts here *************
   // GET: /Home/

        public ActionResult Index()
        {
            ViewBag.Tests = GetTests();
            return View();
        }

 public IEnumerable<TestModel> GetTests()
        {
            List<TestModel> tests = new List<TestModel>();
            for (int i = 0; i < 10; i++)
            {
                int k = i + 1;
                if (i / 2 == 0)
                {
                    tests.Add(new TestModel() { ID = k, Name = "Name" + k, IsActive = true });
                }
                else
                {
                    tests.Add(new TestModel() { ID = k, Name = "Name" + k, IsActive = false });
                }
            }

            return tests.AsEnumerable();
        }

        public JsonResult GetTests1()
        {
            return Json(this.GetTests(), JsonRequestBehavior.AllowGet);
        }
*****************************************Ends here *********************** HOme Controller**********************
2017-03-20_132311.png

Sander Elias

unread,
Mar 20, 2017, 9:38:36 AM3/20/17
to Angular and AngularJS discussion
Hi Ce,

It is a lot easier to help you if you put in your problem using a plnkr.

Regards
Sander
Reply all
Reply to author
Forward
0 new messages