角度模型值显示为对象

时间:2015-09-15 17:34:34

标签: javascript angularjs

我有一个保存用户首选项的功能。通过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发送到服务器时,CourtRoom是一个对象,而不仅仅是一个直接值。所以它基本上是&#34; CourtRoom.CourtRoom = 5&#34;我只想要&#34; 5&#34;。

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

CourtRoom:对象
CourtRoom:&#34; A12&#34; &lt; - 这是我在展开CourtRoom时看到的内容 proto :对象
IsDefault:false
LocID:&#34; ATP&#34;
PreferenceID:&#34; 0&#34;
用户ID:&#34; dpeng&#34;
proto :对象

如果不给它一个物体,我如何直接获得该值?

编辑澄清:

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

我想将对象newPreference发送到服务,但是WITHIN newPreference是一个名为&#34; CourtRoom&#34;的对象。而且我不希望那个作为一个对象,我希望它作为一个单一的价值。现在它将作为对象发送,而所有其他参数作为单个项目发送。

3 个答案:

答案 0 :(得分:2)

您应该只在HTTP POST中发送CourtRoom值而不是整个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);
      });

答案 1 :(得分:0)

如果您只想发送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代替datahttps://stackoverflow.com/a/11443066/2163901

答案 2 :(得分:0)

我改变了我的功能如下:

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

我添加了.CourtRoom并且它有效。