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

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 ?

Answer 1

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

Answer 2

User-1846805900 posted

Thanks a lot Krunal

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