使用Angular.js和PHP在選擇下拉列表中遇到問題

Question

我在使用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數據集如果用戶選擇了默認名稱ie-Select Lecture Plan並單擊以進行更新，它應該顯示錯誤消息，但在這種情況下，它始終采用以前的值ie-LP1 -LP1。請幫助我解決此問題。

Answer 1

嘗試以下ng-options

sec.value as sec.name for sec in listPlanData