当为作用域分配不同的值并只调用一个值时

When Assigning different value to a scope and just call one

本文关键字：调用 一个 作用域 分配      更新时间：2023-09-26

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

您就快到了。

您的$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>

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

试试这个兄弟。。

控制器

$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的函数就是触发器。。

关于进一步的问题，请问我，我对你的问题持开放态度

相关文章：