AngularJS

Question

我正在创建一个 laravel 应用程序，我正在尝试使用 Angular 在我的视图中访问子对象的属性。我可以在我的视图中获取整个数据（包括子对象），但是在尝试使用 Angular.

显示它时遇到了问题

控制器：

 public function index(Request $request)

        $lang = $request->input('lang') ?? 'pt';
        $interestTranslations = Interest::with([
            'interesttranslations' => function($query) use ($lang) {
                $query->where('languageCode', $lang);
            }
        ])->get()->toArray();

        return ['translatedInterests' => $interestTranslations];
    }

}

js文件：

app..controller("Interests", function ($scope, $rootScope, HobbiesService) {
        var lang = $rootScope.lang;
        HobbiesService.newData(lang).then(function (response) {
            $rootScope.interests = response["data"].translatedInterests;
        });
    })

html 文件（interest.interesttranslations 有效但 interest.interesttranslations.name_or_other_property 无效）：

<p style="color: white;">{{interests}}</p> <!-- this shows the whole json datam including the child objects-->

<div class="no-padding owl-carousel" id="hobbies-container" ng-controller="Interests">
    <div ng-repeat="interest in interests">
        <img src="/img/about/{{ interest.imageName }}" alt="{{ interest.imageName }}" /> <!--this works-->
        <p style="color: white;">{{ interest.interesttranslations.name }}</p> <!--this doesn't work-->
    </div>
</div>

json 使用{{兴趣}}时显示在我的视图中：

[{
    "id": 1,
    "applicant_id": 1,
    "imageName": "friends.png",
    "created_at": null,
    "updated_at": null,
    "interesttranslations": [{
      "interest_id": 1,
      "languageCode": "pt",
      "name": "explorar com amigos",
      "created_at": null,
      "updated_at": null
    }]
  }, {
    "id": 2,
    "applicant_id": 1,
    "imageName": "world.png",
    "created_at": null,
    "updated_at": null,
    "interesttranslations": [{
      "interest_id": 2,
      "languageCode": "pt",
      "name": "viajar",
      "created_at": null,
      "updated_at": null
    }]
  },
  {
    "id": 3,
    "applicant_id": 1,
    "imageName": "tv-shows.png",
    "created_at": null,
    "updated_at": null,
    "interesttranslations": [{
      "interest_id": 3,
      "languageCode": "pt",
      "name": "séries televisivas",
      "created_at": null,
      "updated_at": null
    }]
  }
]

提前致谢！

Answer 1

属性 interesttranslations 是数组，不是对象。

在视图中尝试

{{ interest.interesttranslations[0].name }}

或使用内部 ng-repeat 迭代该数组

<p ng-repeat="item in interest.interesttranslations">
    {{item.name}}
</p>

AngularJS - 从控制器访问 JSON 数据中的子对象

AngularJS - accessing child object in JSON data from controller

laravel-5

laravel-eloquent