Angular模型值显示为一个对象

Angular model value is appearing as an object

本文关键字:一个对象 显示 模型 Angular      更新时间:2023-09-26

我有一个保存用户首选项的函数。这些首选项是通过3个下拉(选择)对象选择的。下拉列表用以下代码填充:

<div ng-controller="UserCtrl">
    <div class="row" ng-show="$parent.loggedin">
        <div class="col-sm-3">
            <div class="form-group">
                <label for="lawType">Select a Type of Law</label>
                <select class="form-control" id="lawType" name="lawType" ng-change="getCourthouse();" ng-model="typeoflaw.LitigationType" ng-options="typeoflaw.LitigationType for typeoflaw in typeoflaw track by typeoflaw.LitigationCode" required>
                    <option value="">--Select a Type of Law--</option>
                   <!-- <option value="0" selected>--Select a Type of Law--</option>
                    <option ng-repeat="type in typeoflaw" value="{{ type.LitigationCode}}">{{ type.LitigationType }}</option>-->
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-group" ng-show="courtHouse.length">
                <label for="courtHouse">Select a Courthouse</label>
                <select class="form-control" id="courtHouse" name="courtHouse" ng-model="courtHouse.Loc_ID" ng-change="getCourtroom();" ng-options="courtHouse.Loc_Name for courtHouse in courtHouse track by courtHouse.Loc_Name" required>
                    <option value="">--Select a Courthouse--</option>
                    <!--<option ng-repeat="bldg in courtHouse track by $index" value="{{ bldg.Loc_ID }}">{{ bldg.Loc_Name }}</option>-->
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-group" ng-show="courtRoom.length">
                <label for="courtRoom">Select a Department</label>
                <select class="form-control" id="courtRoom" name="courtRoom" ng-model="courtRoom.CourtRoom" ng-options="courtRoom.CourtRoom for courtRoom in courtRoom track by courtRoom.CourtRoom" required>
                    <option value="">--Select a Department--</option>
                    <!-- <option ng-repeat="room in courtRoom" value="{{ room.CourtRoom }}">{{ room.CourtRoom }}</option>-->
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="favorite-button" ng-show="courtRoom.length">
                <button class="btn  btn-primary pull-left" ng-click="SavePreferences();">Add Favorite</button>
            </div>
        </div>
    </div>
    <div class="row" ng-show="userPreferences.length">
        <div class="col-sm-12 favorite-header">
            <h2>Your Saved Favorites</h2>
        </div>
    </div>
    <div class="row" ng-show="userPreferences.length">
        <div class="col-sm-3 favorite-column-title">
            Courthouse
        </div>
        <div class="col-sm-3 favorite-column-title">
            Department
        </div>
        <div class="col-sm-3 favorite-column-title">
            Type of Law
        </div>
        <div class="col-sm-3 favorite-column-title">
            Default
        </div>
    </div>
    <div class="row" ng-show="userPreferences.length" ng-model="userPreferences" ng-repeat-start="userPreference in userPreferences">
        <div class="col-sm-3">
            {{ userPreference.LocName }}
        </div>
        <div class="col-sm-3">
            {{ userPreference.CourtRoom}}
        </div>
        <div class="col-sm-3">
            {{ userPreference.LitigationType }}
        </div>
        <div class="col-sm-3">
            <span ng-if="showDefaultIcon(userPreference.IsDefault);" class="glyphicon glyphicon-ok green-check"></span>
            <span ng-if="!showDefaultIcon(userPreference.IsDefault);" class="glyphicon glyphicon-heart red-heart" ng-click="setAsDefault();"></span>
        </div>
    </div>
    <div ng-repeat-end></div>
</div>

函数的代码如下:

$scope.SavePreferences = function () {
          $scope.userid = 'dpeng';
          $scope.departmentNumber = $scope.courtRoom.CourtRoom;
          $scope.newPreference = {
              "PreferenceID": "0",
              "UserID": $scope.userid,
              "LocID": $scope.courtHouseId.Loc_ID,
              "CourtRoom": $scope.departmentNumber,
              "IsDefault" : $scope.isDefault
          };
          $http({
              method: 'POST',
              url: 'http://10.34.34.46/BenchViewServices/api/UserPreference/Post',
              data: $scope.newPreference,
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
              }
          }).error(function (status, data) {
              console.log(data.error);
          });
      }

当$scope。newPreference被发送到服务器。法庭是一个对象,而不仅仅是一个直接的值。所以基本上是"法庭"。法庭= 5"我只想要"5".

这是我在Visual Studio调试器中看到的:

法庭:对象
法庭:"A12" <——这是我展开法庭时看到的效果
proto: Object
IsDefault: false
LocID: "ATP"
PreferenceID: "0"
用户id: "dpeng"
proto: Object

我如何直接得到那个值而不让它返回给我一个对象?

编辑说明:

根据到目前为止我得到的答案,我可以说我的问题问得不够清楚。

我想发送对象newPreference到服务,但是WITHIN newPreference是一个名为"法庭"的对象,我不想让它作为一个对象,我想让它作为一个单一的值。现在它是作为一个对象发送的,而所有其他参数都是作为一个单独的项发送的。

您应该在HTTP POST中只发送法庭值,而不是整个newPreference对象:

$http({
          method: 'POST',
          url: 'http://10.34.34.46/BenchViewServices/api/UserPreference/Post',
          data: $scope.newPreference.CourtRoom,
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
          }
      }).error(function (status, data) {
          console.log(data.error);
      });

如果您只想发送CourtRoom参数,那么您必须这样做:

$http({
  method: 'POST',
  url: 'http://10.34.34.46/BenchViewServices/api/UserPreference/Post',
  params: {
    CourtRoom: $scope.departmentNumber
  },
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

既然你使用表单数据,你应该使用params而不是data。https://stackoverflow.com/a/11443066/2163901

我改变了我的函数如下:

$scope.SavePreferences = function () {
          $scope.userid = 'dpeng';
          $scope.departmentNumber = $scope.courtRoom.CourtRoom;
          $scope.newPreference = {
              "PreferenceID": "0",
              "UserID": $scope.userid,
              "LocID": $scope.courtHouseId.Loc_ID,
              "CourtRoom": $scope.departmentNumber.CourtRoom,
              "IsDefault" : $scope.isDefault
          };
          $http({
              method: 'POST',
              url: 'http://10.34.34.46/BenchViewServices/api/UserPreference/Post',
              data: $scope.newPreference,
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
              }
          }).error(function (status, data) {
              console.log(data.error);
          });
      }

我添加了。法庭,它成功了。