locked
MVC dropdownlist don't select item with value pass from ng-model ? RRS feed

  • Question

  • User-1846805900 posted

    Hi

    i here try to edit data thou angularjs and i got all data in view - but the only problem is that the dropdownlist don't select the value that passed to it and i don't know why ?

    JS Code:

        function getCustomer() {
            var promiseGetStudent = SPACRUDService.getCustomer(ShareData.value);
    
            promiseGetStudent.then(function (pl) {
                pl.data.MirageDate = $filter('date')(pl.data.MirageDate, 'yyyy-MM-dd');
    
                $scope.Cust = pl.data;
            },
                  function (errorPl) {
                      $scope.error = 'failure loading Student', errorPl;
                  });
        }

    HTML Code:

                <table class="table">
                        <td style="width:200px; text-align:center; vertical-align:central">إسم العميل</td>
                        <td>
                            <table class="table" style="margin-bottom: -3px;">
                                <tr>
                                    <td style="padding:0; vertical-align:central; width:50%;">
                                        <div class="input-group">
                                            <span class="input-group-addon ion ion-person"></span>
                                            <input type="text" class="form-control" placeholder="إسم العميل" ng-model="Cust.CustomerName">
                                        </div>
                                    </td>
                                    <td style="width:125px; vertical-align:central" class="text-center">المدينة</td>
                                    <td style="padding:0; vertical-align:central">
                                        <input type="text" ng-model="Cust.CityID" name="cid" id="cid" />
                                        @Html.DropDownList("CityID", null, "إختر المدينة", htmlAttributes: new { @class = "form-control", @style = "width=100%", @ng_model = "Cust.CityID" })
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

    API Code:

            [ResponseType(typeof(Customer))]
            public IHttpActionResult GetCustomer(int id)
            {
                Customer customer = db.Customers.Find(id);
                if (customer == null)
                {
                    return NotFound();
                }
    
                return Ok(customer);
            }

    and i got result as:

    as you can see i get the value of "CityID" but the dropdownlist don't select it from items on it, and when i look into html of dropdownlist i found that:

    <select class="form-control ng-pristine ng-untouched ng-valid" id="CityID" name="CityID" ng-model="Cust.CityID" style="width=100%">
    
    <option value="? number:2 ?"></option>           // this the value in Cust.CityID ??!!!!!!!!!
    
    <option value="" disabled="disabled">إختر المدينة</option>
    <option value="1">06-أكتوبر</option>
    <option value="2">أبو زعبل</option>
    <option value="3">أوتوستراد</option>
    <option value="4">البدرشين</option>
    </select>

    so please what is the problem here ?

    Wednesday, July 8, 2015 9:41 AM

Answers

  • User-1846805900 posted

    Thanks a lot Krunal

    it works when i use ng-options and it done now ...

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, July 12, 2015 8:07 PM

All replies

  • User1644755831 posted

    Hello a.amin,

    Please see this: https://docs.angularjs.org/api/ng/directive/select

    AS per documentation "The value of a select directive used without ngOptions is always a string. When the model needs to be bound to a non-string value, you must either explictly convert it using a directive or use ngOptions to specify the set of options. This is because an option element can only be bound to string values at present."

    Create a directive to convert string to number and try.

    angular.module('nonStringSelect', [])
    .run(function($rootScope) {
      $rootScope.model = { id: 2 };
    })
    .directive('convertToNumber', function() {
      return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
          ngModel.$parsers.push(function(val) {
            return parseInt(val, 10);
          });
          ngModel.$formatters.push(function(val) {
            return '' + val;
          });
        }
      };
    });

    Hope this helps.

    With Regards,

    Krunal Parekh

    Thursday, July 9, 2015 10:12 PM
  • User-1846805900 posted

    Thanks a lot Krunal

    it works when i use ng-options and it done now ...

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, July 12, 2015 8:07 PM