How to bind Selected Value of dropdown to my model with angularjs

Question

I want to Bind Dropdown selected countryId to my class CountryId and Selected Stateid Value to StateId using angularjs.

My Country and State Dropdown has been loaded successfully.

This is my Model:

public partial class Friends
    {
        public int Id { get; set; }
        public string firstname { get; set; }
        public string lastname { get; set; }
        public string address { get; set; }
        public string postalcode { get; set; }
        public string notes { get; set; }
        public Nullable<int> CountryId { get; set; }
        public Nullable<int> StateId { get; set; }
    }

This is my View:

 <select data-ng-model="newfriend.country2" data-ng-options="c as c.Name for c in allItems" data-ng-change="">
                <option value="">-- Select Country --</option>
            </select>


            <label>State:</label>
            <select data-ng-model="newfriend.state2" data-ng-disabled="!newfriend.country2" data-ng-options="s.Id as s.Name for s in newfriend.country2.State">
                <option value="">-- Select State --</option>
            </select>

This is my controller method to get both Country State in one method:

public JsonResult GetCountryState()
        {
            var Data = db.Country.Select
                                (
                                    d => new CountryModel
                                    {
                                        Id = d.Id,
                                        Name = d.Name,
                                        State = d.State.Select
                                        (
                                             x => new StateModel
                                             {
                                                 Id = x.Id,
                                                 Name = x.Name
                                             }
                                        ).ToList()
                                    }
                                ).ToList();
            return Json(Data, JsonRequestBehavior.AllowGet);
        }

This is my call to Add Controller method:

$http.post('../Home/AddFriends', this.newfriend).success(function (data) {}

My Controller Method in which i want to bind my values to FriendsModel):

 public ActionResult AddFriends(Friends FriendsModel)
        {
         }

Can anybody help me???

Subin Sebastian · Accepted Answer · 2014-12-12 06:49:54Z

2

I have a created a basic plunker

http://plnkr.co/edit/Wylq6UOuh7XBV7aX7OAL?p=preview

$scope.states=[{id:1,name:'state1'}, {id:2,name:'state2'}, {id:3,name:'state3'}, {id:4,name:'state4'}]



<select data-ng-model="selectedState">
  <option data-ng-repeat="state in states" value="{{state.id}}">{{state.name}}</option>
</select>

Initialise the selectedState in your controller fo eg: $scope.selectedState =1; this will make state1 as default selected option.

answered Dec 12, 2014 at 6:49

Subin Sebastian

11k3 gold badges39 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user4155786 Over a year ago

but cant i do this in my way and please if possible also guide me to pass that value to my controller model

Collectives™ on Stack Overflow

How to bind Selected Value of dropdown to my model with angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related