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

时间:2018-03-11 17:47:27

标签: angularjs json asp.net-mvc-4

我通过api休息接收一个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>

1 个答案:

答案 0 :(得分:0)

首先它不是json,因为在json格式中name属性和属性应该是string。

它应该在,

之后包含}

因此,如果我理解正确,您会显示从其余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>