使用Angular.js和PHP在select下拉列表中获取问题

Getting issue in select drop down using Angular.js and PHP

本文关键字:下拉列表 获取 问题 select Angular js PHP 使用      更新时间:2023-09-26

我在使用Angular.js的下拉列表中有一个问题。让我先解释一下代码。

<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>

以下是我的控制器文件代码。

$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) {
            });
});

以下功能是在用户单击编辑按钮之后。

$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) {
            });
    }

参数CCD_ 1取DB中的计划名称。

以下函数是我的更新函数。

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...");
                }
            } 
            });

在上面的下拉列表中,我正在从DB动态绑定。现在我有一个edit情况,在这种情况下,所有选择的数据都设置在这个下拉列表中以供进一步更新。假设当用户单击编辑按钮并在此下拉列表中设置LP1数据时。如果用户选择默认名称i.e-Select Lecture Plan并单击进行更新,则应显示错误消息,但在这种情况下,它始终采用以前的值i.e-LP1。请帮我解决这个问题。

尝试以下ng选项

sec.value as sec.name for sec in listPlanData