当为范围分配不同的值并只调用一个时答案

【问题标题】：When Assigning different value to a scope and just call one当为范围分配不同的值并只调用一个时
【发布时间】：2014-09-18 00:32:53
【问题描述】：

我第一次尝试使用 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>

【问题讨论】：

标签： javascript angularjs variables angularjs-scope angular-ngmodel

【解决方案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>

【讨论】：

你好新开发者，你的代码对我有用。谢谢你的触发，我还没有考虑过:)

【解决方案2】：

简单来说，$scope.colors 是一个数组，$scope.colors.name 语法错误，会不会写错，应该使用 $scope.MyColor.Name

【讨论】：

【解决方案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 的函数就会触发..

更多问题可以问我，我愿意接受你的问题

【讨论】：