CODEWITHSUNDEEP
htmlangularjs
Shantnu
Shantnu

Reputation: 137

Selected value do not changes if default value is selected in select element using angular JS

After binding data in select element using ng-options , setting selected value from edit function , showing error "Cannot set property 'UID' of undefined" . But if i select another value from select element other than default value , then value changes on edit function.

Here's my select element code:

<select name="userRole" id="userRole" ng-model="userRoleModel" ng-options="r.Role for r in roles track by r.UID" class="form-control select-1">
    <option value="" ng-selected="true">ROLES</option>
</select>

Angular JS function:

**//--Binding data to select element--//**
$scope.GetRoles = function()
{
 $http({
    methhod:"get",
    url:"/Admin/GetRoles",
    datatype:"json"
 }).then(function(response){
    var jData = JSON.parse(response.data);
    $scope.roles = jData.ResultData;
 },function(response){
    console.log(response.data)
 })
};

**//--Edit function--//**
$scope.GetUserUpdateData = function(userData){
$scope.userUID = userData.UID;
$scope.userName = userData.Name;
$scope.userUsername = userData.Username;
$scope.userPassword = userData.Password;
$scope.userRoleModel.UID = userData.RoleID;
$scope.userRoleModel.Role = userData.Role;
$scope.example2model = userData.ChannelUIDs;
}

JSON DATA

{"ResultData":[{"UID":"1","Role":"Super Admin"},{"UID":"2","Role":"Admin"},{"UID":"2b660a63-c038-4bcd-8fcc-616af7cce4a9","Role":"Operator"},{"UID":"6","Role":"Customer"}]}

Rather than this code anything required please comment.

Upvotes: 1

Views: 64

Answers (2)

Shaishab Roy
Shaishab Roy

Reputation: 16805

You got this error in your edit function because you did not define your userRoleModel before assign it's nested property value.

got error for this line $scope.userRoleModel.UID = userData.RoleID; because $scope.userRoleModel is not defined. Declare outside of edit function first as empty object like $scope.userRoleModel = {} then should work.

like: 

$scope.userRoleModel = {}

$scope.GetUserUpdateData = function (userData) {
  $scope.userUID = userData.UID;
  $scope.userName = userData.Name;
  $scope.userUsername = userData.Username;
  $scope.userPassword = userData.Password;
  $scope.userRoleModel.UID = userData.RoleID;
  $scope.userRoleModel.Role = userData.Role;
  $scope.example2model = userData.ChannelUIDs;
}

but better to use reference like

$scope.userRoleModel = $scope.roles[index];

Upvotes: 1

Dhaval Chheda
Dhaval Chheda

Reputation: 924

Select the Object from roles as a default value rather than property inside the object. Since default value maps to the object value in ng-options.

                <select     
                ng-value="r"
                ng-model="userRoleModel"
                ng-options="r.Role for r in roles track by r.UID" >
                    <option value="?" selected="selected">
                    </option>
                </select>

Then in the controller select the default value you need for object.

$scope.userRoleModel = $scope.roles[1];

Reference : https://docs.angularjs.org/api/ng/directive/ngOptions

Upvotes: 1

Related Questions