javascript - 使用Angular.js和PHP在选择下拉列表中遇到问题

我在使用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) {
            });
    }

参数plan_name从数据库获取计划名称。

以下功能是我的更新功能。

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

sec.value as sec.name for sec in listPlanData

关于javascript - 使用Angular.js和PHP在选择下拉列表中遇到问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33885896/