1

I have one issue in my drop down list using Angular.js.Let me to explain the code first.

<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Lecture Plan :</span>
<!--<input type="text" name="topic" class="form-control" ng-model="plan" id="plan" placeholder="Add Plan No" ng-keypress="clearField('plan');"/>-->
<select class="form-control" id="plan" ng-model="plan" ng-options="sec.name for sec in listPlanData track by sec.value " ng-change="clearField('plan');" > </select>
</div>

the following is my controller file code.

$scope.listPlanData=[{
        name:'Select Lecture Plan',
        value:'0'
    }
    ];
    $scope.plan=$scope.listPlanData[0];


$http({
                method:'GET',
                url:"php/userplan/getPlanName.php",
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            }).then(function successCallback(response){
                angular.forEach(response.data, function(obj){
                var Session={'name':obj.plan_name , 'value':obj.lp_id};
                    $scope.listPlanData.push(Session);
                });
            },function errorCallback(response) {
            });

});

The following function is after user clicked on edit button.

$scope.getLecturePlan=function(plan_name){
           //console.log('plan name',plan_name,$scope.plan);
           $scope.listPlanData=null;
            $scope.listPlanData=[{
                name:'Select Lecture Plan',
                value:'0'}];
            $scope.plan=$scope.listPlanData[0];
            $http({
                method:'GET',
                url:"php/userplan/getPlanName.php",
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            }).then(function successCallback(response){
                // console.log('plan ',response);
                angular.forEach(response.data, function(obj){
                var Session={'name':obj.plan_name , 'value':obj.lp_id};
                    $scope.listPlanData.push(Session);
                    if(obj.plan_name==plan_name){
                        $scope.plan.value=obj.lp_id;

                    }
                });
            },function errorCallback(response) {
            });
    }

the parameter plan_name is taking the plan name from DB.

The following function is my update function.

if($scope.buttonName=="Update"){
            console.log("aaaaaaa",$scope.plan.name);
            if($scope.date==null){
            alert('Please select date');
            }else if($scope.plan.value==null || $scope.plan.value=='0' || $scope.plan.name=="Select Lecture Plan"){
            alert('Please add Lecture plan');
            }else if($scope.topic==null){
            alert('Please add topic');
            }else{

            var dataString = "unit_plan_id="+temp_unit_id+"&plan_id="+id+"&date="+$scope.date+"&lession_plan="+$scope.plan.name+"&topic="+$scope.topic;
            //alert("::"+dataString);

            $.ajax({ 
            type: "POST",url: "php/userplan/updatePlanData.php" ,data: dataString,cache: false,
            success: function(html)
            {
                var dobj=jQuery.parseJSON(html);
                //alert(dobj.result);
                if(dobj.result == 0)
                {
                    alert(dobj.error);
                }
                else
                {
                    var updatedata={'unit_id':temp_unit_id};

                    $scope.viewPlanData=null;
                    $scope.viewPlanData=[];

                    $http({
                        method:'POST',
                        url:"php/userplan/readPlanData.php",
                        data:updatedata,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                    }).then(function successCallback(response){
                        console.log('res',response.data);
                        $scope.viewPlanData=response.data;
                        //document.getElementById("unit_list").style.display = "none";
                        //document.getElementById("plan_list").style.display = "block";
                    },function errorCallback(response) {


                    });

                    $scope.date = null;
                    $scope.plan = null;
                    $scope.topic = null;
                    $scope.clearPlanData();
                    alert("Plan updated successfully...");

                }
            } 
            });

In the above drop down list i am binding the dynamically from DB.Now i have one edit case in this case all selected data are set in this drop down for the further update.Suppose when user clicked on edit button and LP1 data set in this drop down.if user selected default namei.e-Select Lecture Plan and clicked for update it should display the error message but in this case it is taking the previous value i.e-LP1 always.Please help me to resolve this issue.

9
  • 1
    Can you share the LP1 data and is it assigned to $scope.listPanData and also share the code for clearField function... Commented Nov 24, 2015 at 5:37
  • @SameerK : I have updated my code.clearField function is used just removed the border color. Commented Nov 24, 2015 at 5:47
  • Tried the above code in my local setup and works fine. It seems there is a code which is overriding the selected value with previous one. Can you share the edit and update functions ?? Commented Nov 24, 2015 at 6:29
  • @SameerK : I added the code please check my post. Commented Nov 24, 2015 at 6:40
  • Asked for update function too . please share update function. Commented Nov 24, 2015 at 6:46

1 Answer 1

0

Try the following ng-options

sec.value as sec.name for sec in listPlanData 
Sign up to request clarification or add additional context in comments.

1 Comment

I did as per you but it is taking input undefined whatever i am selecting.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.