Jak wyświetlić wartość z pliku json do inputa, korzystając z dyrektywy AngularJS?

Question

Dzień Dobry!
 W aplikacji, którą tworzę trafiłem na problem, z którym walczę od kilku godzin. Mianowicie nie wiem, dlaczego nie wyświetla mi nigdzie wartości w inpucie, ktora jest pobierana z pliku JSON. Oto kod HTML:

 

<div class="row boxPosition" ng-repeat="box in words.options track by $index">
                <div class="col-md-4">
                    <img ng-src="img/{{words.imgPath}}/{{box.img}}">
                    <div class="formContainer"> <!-- dodac form example container -->
                        <span class="numberOfBox">{{$index+1}}</span>
                        <input class="formStyles" type="text"  ng-pattern="{{box.answer}}" ng-disabled="inputBlock" ng-model="answer[$index]">
                        <img src="img/correct.png" alt="correct" ng-show="isOptionVisible[$index]">
                        <img src="img/incorrect.png" alt="incorrect" ng-show="isOptionInvisible[$index]">
                    </div>
                </div>
            </div>

Oraz plik JSON

{
	"name": "Exercise 1 Vocabulary",
	"question": "Label the weather symbols",
	"imgPath": "task1",
	"options": [  					
		{
			"option": 1,
			"answer": "foggy",
			"img": "1.png",
			"isExample": true
		},
		{
			"option": 2,
			"answer": "raining",
			"img": "2.png",
			"isExample": false
		},
		{
			"option": 3,
			"answer": "sunny",
			"img": "3.png",
			"isExample": false
		},
		{
			"option": 4,
			"answer": "cloudy",
			"img": "4.png",
			"isExample": false
		},
		{
			"option": 5,
			"answer": "windy",
			"img": "5.png",
			"isExample": false
		},
		{
			"option": "6",
			"answer": "snowing",
			"img": "6.png",
			"isExample": false
		}
	]
}

 

Na załączonym obrazku widać, że odwołuję się do box.answer w ng-pattern  (ng-pattern="{{box.answer}}"). Ten zapis jest poprawny, ponieważ poza inputem prawidłowo pobiera dane z pliku i je wypisuje. Co jest przyczyną problemu? Próbowałem z ng-bind, ng-value, value, ng-pattern i nadal nie działa. Prosze o pomoc.
Pozdrawiam

Comments

W konsoli jest coś napisane?

---

Nic nie ma właśnie, wcześniej za pomocą ng-search wczytuje w analogiczny sposób obrazki i  wczytują się poprawnie 
 

<img ng-src="img/{{words.imgPath}}/{{box.img}}">

 

---

ng-src działa trochę inaczej ;). W jaki sposób pobierasz dane z pliku json?

---

	var app = angular.module("main", []);
    app.controller('ctrl', ['$scope', '$http', '$log', function($scope, $http, $log) {
        $http.get('list.json')
            .success(function(model) {

                $scope.words = model;
            })
            .error(function(model, status){

                $log.error('Unexpected error number:' +status+'');

            });

Linia w linie dokładnie tak :)

---

Dlaczego w inpucie odwołujesz się do {{  box.answer }} skoro dane z JSONa masz w $scope.words? Spróbuj odwołać się do {{ words.options[0].answer }}

---

To nie zadziała, 2 linie wyżej odwołuję się do 

<img ng-src="img/{{words.imgPath}}/{{box.img}}">

i wszystko wczytuje się poprawnie, a "answer" znajduje się w tym samym poziomie co "img" w pliku json, ponadto jeśli wpiszę {{ box.answer }} poza inputem, to wszystko wczytuje się bez zarzutów :)

---

no tak, przecież tam jest ng-repeat, chyba już zasypiam. ;)

https://plnkr.co/edit/3hEcqtTB5X4JbKhbL0bj?p=preview

tutaj masz rozwiązanie. :)

---

Czyli jednak da się zrobić to za pomocą ng-value :) super, dzięki i miłej nocki życzę :)

Answer 1

W Angularze aby cokolwiek przekazać do templatki trzeba zawrzeć dane w tzw. $scope, czyli w Twoim przypadku najlepiej w kontrolerze Angulara wyciągnąć sobie dane z pliki i przypisać je sobie do $scope.

Ja bym na Twoim miejscu właśnie odczytał sobie dane z pliku i przypisał je do $scope. Powinno to mniej więcej wyglądać tak:

$scope.data = daneWyciagnieteZPliku;

W potem po wywołaniu sobie tego w console.log powinieneś dostać właśnie takiego hasha jak jest w pliku, następnie możesz odwołać się do konkretnej odpowiedzi np. tak:

$scope.data.options[0].answer // => "foggy" 

To co jest w ng-pattern to tylko regex, który ma na celu sprawdzenie czy w input wpisałeś poprawną odpowiedź, a jeżeli tak to aktywuje przycisk i możesz przejść do kolejnego pytania. W tej kwestii to nie ma wielkiego znaczenia.

Reasumując musisz po prostu otworzyć plik. Zapisać zawartość pliku do formatu JSON, bo po odczytaniu danych z pliku dostaniesz tekst, który nijak Cie nie urządza, do tego pewnie służy ta funkcja https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse. Następnie JSON należy przypisać do jakiejś zmiennej w $scope tak jak pokazałem na początku i można już wywoływać to w widoku poprzez np.:

data.options[0].answer // => do inputa powinno wstawić foggy

No i to tyle powinno działać.

Comments

Postaram się to rozwiązać Twoim sposobem. Rozumiem, że po prostu nie da się wyświetlić bezpośrednio wartości z pliku zewnętrznego do inputa?

---

Nie da się w Angular musisz wszystko przekazywać do templatki poprzez $scope w odpowiednim kontrolerze ;)