Angular JS：我如何使用 Json 数据更改内容

Question

我通过 api rest 收到一个 json 对象。当从 json 收到的位置数 = 0 时，我想更改页面的内容。 我有这种 JSON 格式：

{
date:"2016-06-30T01:01:01"
id:5
places:[]
}

{
date:"2016-06-30T01:01:01"
id:5
places:
{place: 57}

{
 date:"2016-06-30T01:01:01"
id:5
places:
{place: 57}

{place: 58}

{place: 59}

{place: 60}
}

我的控制器 Angular：

$scope.LoadAllSpots = function () {

        SpotConfigurationService.GetListSpots(function (datas) {
            $scope.CAMs = datas;
            console.log(datas);
            angular.forEach($scope.CAMs, function (value, Key) {
                if (value.places.lenght == 0) {
                    $scope.ActiveAjoutPlace = false;

                }

            });
        }

我的html页面：

如果从 json = 0 收到位置，我会显示第一行，否则我会显示另一行：请给个主意

 <div class="row " ng-show="ActiveAjoutPlace">

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" ng-if="@ViewBag.IsLeft">

          <div class="ImgCamera col-lg-6 col-md-6 col-sm-6 col-xs-6 ">

         </div>  
       </div>
</div> 

  <div class="container">

<div class="row " ng-show="!ActiveAjoutPlace">

      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ListPlace ">

         <div class="PlaceNumber">

          <div class="input-group input-group-left SelectStyle">

                  <select class="form-control">

      <option>place 124</option>

                </select>

             </div>

        </div>

       <div class="row RowPicto">

             <div class="SvgPicto col-lg-2 col-md-2 col-sm-2 col-xs-2">

               <img src="@Url.Content(" ~/Resources/Common/pic_handicap.svg ")" />

         </div>
                <div class="SvgPicto col-lg-2 col-md-2 col-sm-2 col-xs-2">

            <img src="@Url.Content(" ~/Resources/Common/pic_Elec_car.svg ")" />

            </div>
                <div class="SvgPicto col-lg-1 col-md-1 col-sm-1 col-xs-1">

                  <img src="@Url.Content(" ~/Resources/Common/pic_moto.svg ")" />

            </div>
            </div>
            <div class="row RowPicto">

             <div class="SvgPicto col-lg-1 col-md-1 col-sm-1 col-xs-1">

                  <img src="@Url.Content(" ~/Resources/Common/car.svg ")" />


             </div>

          <div class="SvgPicto col-lg-1 col-md-1 col-sm-1 col-xs-1">

               <img src="@Url.Content(" ~/Resources/Common/pic_famille.svg ")" />

            </div>
                <div class="SvgPicto col-lg-1 col-md-1 col-sm-1 col-xs-1">

              <img src="@Url.Content(" ~/Resources/Common/pic_GPL_car.svg ")" />

         </div>

        </div>

         <br/>

         <div class="row">

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 ">

          <button value="ToggleContent"click="toggleContent()">Supprimer</button>

           </div>

         </div>       
     </div>         
   <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" ng-if="!@ViewBag.IsLeft">       
         <div class="ImgCamera col-lg-6 col-md-6 col-sm-6 col-xs-6 ">        
        </div>      
      </div>  
 </div>

Answer 1

首先它不是 json，因为在 json 格式中，名称属性和属性应该是字符串。

它应该在}之后包含,

因此，如果我理解正确，您会显示从 rest API 调用收集的一些数据并将其分配给 $scope.CAMs，如果我理解您希望在 $scope.CAMs 为空或不为空时显示两个不同的 div，对吗？

您可以像这样使用ng-if 指令：

<div ng-if="CAMs.length > 0"> There is data </div>
<div ng-if="CAMs.length == 0"> CAMs is empty </div>

但是$scope.CAMs 需要是有效的对象或 JSON。

---

孩子也一样：

<div ng-if="CAMs.places.length > 0"> There is data </div>
<div ng-if="CAMs.places.length == 0"> CAMs is empty </div>