범위에 다른 값을 지정하고 하나만 호출 할 때

Question

저는 AngularJS로 처음 작성하려고하는데 개발자가 아닙니다. 저는 프로그래밍을 매우 시작하고 있습니다.

여기 내 문제가 있습니다. 내가 var ouinon에 지정하려면 $scope.colors에 지정하고, 사용자가 선택한 색상의 값을 프론트 오피스에 입력합니다. ... 작동하지 않습니다 $scope.colors.name 퍼팅 물론

그것은 당신이 쉽게 보일 수

(CONSOLE.LOG에, 그것은 "정의되지 않은"이다),하지만 난 내가 잘못 뭘하는지 볼 수 없습니다.

JS 부 :

function LookCtrl($scope, $http){ 

    $scope.colors = [ 
     {name:'blue', shade:'femme'}, 
     {name:'red', shade:'femme'}, 
     {name:'yellow', shade:'femme'}, 
     {name:'blue', shade:'homme'}, 
     {name:'red', shade:'homme'} 
    ]; 

    $scope.myColor = $scope.colors[2]; 

    var ouinon = "http://api.shopstyle.fr/api/products?pid=uid7689-25635133-51&cat=" 
     + $scope.colors.name + "&limit=60&fl=d0&sort=Popular"; 

    $http.get(ouinon).success(function(data){ 
     $scope.look = data; 
    }); 

HTML 부 : 간단한 측면에서

<section ng-controller="LookCtrl" ng-init="init()" class="panel panel-padding left" 
    ng-class="{center:panel==1, right:panel<1}"> 
    <h1>Selection: </h1> 
    <select ng-model="myColor" 
     ng-options="color.name group by color.shade for color in colors"> 
    </select> 

Answer 1

거의 다 왔어.

귀하의 $scope.MyColor은 선택한 색상으로 묶여 있습니다.

$scope.MyColor.name을 사용하면 이름을 알 수 있습니다.

또한 컨트롤러를 잘못 작성한다고 생각합니다. 달성하고자하는 것은 Ajax 호출을 만들어 일부 데이터를 얻는 것으로 보이지만 데이터를 가져 오기위한 트리거는 무엇입니까? 이 선택이 변경 될 때를 기반으로하는 경우 다음과 같이, 당신은 당신의 컨트롤러를 작성해야 :

.controller("LookCtrl", ["$scope", "$http", function ($scope, $http){ 

    $scope.colors = [ 
     {name:'blue', shade:'femme'}, 
     {name:'red', shade:'femme'}, 
     {name:'yellow', shade:'femme'}, 
     {name:'blue', shade:'homme'}, 
     {name:'red', shade:'homme'} 
    ]; 

    $scope.myColor = $scope.colors[2]; // default selection 

    $scope.onChange = function(){ 
     var ouinon = "http://api.shopstyle.fr/api/products?pid=uid7689-25635133-51&cat=" 
     + $scope.MyColor.name + "&limit=60&fl=d0&sort=Popular"; 

     $http.get(ouinon).success(function(data){ 
      $scope.look = data; 
      $scope.$apply(); // this is needed since it's an async call 
     } 
    }; 

}]); 

을 그런 다음 HTML :

<section ng-controller="LookCtrl" ng-init="init()" class="panel panel-padding left" 
    ng-class="{center:panel==1, right:panel<1}"> 
    <h1>Selection: </h1> 
    <select ng-model="myColor" ng-change="onChange()" 
     ng-options="color.name group by color.shade for color in colors"> 
    </select> 
</section> 

Answer 2

가,은 $ scope.colors가 배열되면, $의 scope.colors.name 당신은, 잘못된 문법 수있다 , 당신은 ... $ scope.MyColor.Name

Answer 3

이 한 형제를 시도 잘못된 사용해야 쓰기

컨트롤러

$scope.colors = [ 
      { name: 'blue', shade: 'femme' }, 
      { name: 'red', shade: 'femme' }, 
      { name: 'yellow', shade: 'femme' }, 
      { name: 'blue', shade: 'homme' }, 
      { name: 'red', shade: 'homme' } 
    ]; 

    $scope.LookCtrl = function() { 

     var ouinon = "http://api.shopstyle.fr/api/products?pid=uid7689-25635133-51&cat=" 
      + $scope.myColor + "&limit=60&fl=d0&sort=Popular"; 

     $http.get(ouinon).success(function (data) { 
      $scope.look = data; 
     }); 
    }; 

HTML

<select ng-model="myColor" ng-options="color.name for color in colors" ng-change="LookCtrl()"> 
</select> 

그것은 당신의 문제를 바탕으로 한 견본입니다하지만 난 당신이 $scope.look을 사용하는 경우 얻을하지만 내 예를 들어 거기가 요청에서 일부 데이터를 포함하지 말아.

도움이되기를 바랍니다.

내가 내 $scope.colors은 (하지만 분명히 컨트롤러 내부) 추가 질문에 대한

있습니다 .. select이 API를 트리거입니다 호출하는 기능을 변경할 때 있도록 단지 개방 저와 임 물어 함수 외부 선언하자 귀하의 질문 :