无法更改视图时，范围，UI选angularjs

<ui-select multiple ng-model="content.categories" theme="bootstrap"name="category" on-select="isCategorySelected()" > 
     <ui-select-match placeholder="Select Category"> 
      {{ $item.label }} 
     </ui-select-match> 
      <ui-select-choices repeat="category.value as category in categories | filter: {label: $select.search}"> 
        <div ng-bind-html="category.label | highlight: $select.search"></div> 
      </ui-select-choices> 
</ui-select>

得到改变所显示的是我的html代码无法更改视图时，范围，UI选angularjs

$scope.categories = [ 
    { label: 'Action', value: 'action' }, 
    { label: 'Adventure', value: 'adventure' }, 
    { label: 'Comedy', value: 'comedy' }, 
    { label: 'Crime', value: 'crime' }, 
    { label: 'Faction', value: 'faction' }, 
    { label: 'Fantasy', value: 'fantasy' }, 
    { label: 'Historical', value: 'historical' }, 
    { label: 'Horror', value: 'horror' }, 
    { label: 'Mystery', value: 'mystery' }, 
    { label: 'Paranoid', value: 'paranoid' }, 
    { label: 'Philosophical', value: 'philosophical' }, 
    { label: 'Political', value: 'political' }, 
    { label: 'Realistic', value: 'realistic' }, 
    { label: 'Romance', value: 'romance' }, 
    { label: 'Saga', value: 'saga' }, 
    { label: 'Satire', value: 'satire' }, 
    { label: 'Science fiction', value: 'sciencefiction' }, 
    { label: 'Slice of Life', value: 'sliceoflife' }, 
    { label: 'Speculative', value: 'speculative' }, 
    { label: 'Thriller', value: 'thriller' }, 
    { label: 'Urban', value: 'urban' } 
];

这是我的javascript代码。上述代码对于选择类别中的定义项目工作良好。现在，如果我为ui-select的ng-model赋值，那么当我们选择一个项目时，它不会更新视图。

$scope.content.categories = [action];

上面的代码片段应该改变视图，但它不是。请帮助我如何做到这一点。

来源

2015-05-29 Sharathreddy

其查看你想通过该用户界面，选择要更改，可以提供完整的网页代码？ – skymk

编辑内容页面视图不更新.. – Sharathreddy

我假设你有一个错字，并在实际代码中是$ scope.content.categories = ['action'];这是对的吗？ – Igor

您应该得到action未在控制台中定义。只要把它引号。

$scope.content.categories = ['action'];

var app = angular.module('app', ['ui.select', 'ngSanitize']); 
 

 
app.controller('myController', function($scope) { 
 

 
    $scope.content = {}; 
 
    $scope.content.categories = ['action']; 
 

 
    $scope.setAdventure = function() { 
 
    $scope.content.categories = ['adventure']; 
 
    }; 
 

 
    $scope.pushComedy = function() { 
 
    if ($scope.content.categories.indexOf('comedy') === -1) { 
 
     $scope.content.categories.push('comedy'); 
 
    } 
 
    }; 
 

 

 
    $scope.categories = [{ 
 
    label: 'Action', 
 
    value: 'action' 
 
    }, { 
 
    label: 'Adventure', 
 
    value: 'adventure' 
 
    }, { 
 
    label: 'Comedy', 
 
    value: 'comedy' 
 
    }, { 
 
    label: 'Crime', 
 
    value: 'crime' 
 
    }, { 
 
    label: 'Faction', 
 
    value: 'faction' 
 
    }, { 
 
    label: 'Fantasy', 
 
    value: 'fantasy' 
 
    }, { 
 
    label: 'Historical', 
 
    value: 'historical' 
 
    }, { 
 
    label: 'Horror', 
 
    value: 'horror' 
 
    }, { 
 
    label: 'Mystery', 
 
    value: 'mystery' 
 
    }, { 
 
    label: 'Paranoid', 
 
    value: 'paranoid' 
 
    }, { 
 
    label: 'Philosophical', 
 
    value: 'philosophical' 
 
    }, { 
 
    label: 'Political', 
 
    value: 'political' 
 
    }, { 
 
    label: 'Realistic', 
 
    value: 'realistic' 
 
    }, { 
 
    label: 'Romance', 
 
    value: 'romance' 
 
    }, { 
 
    label: 'Saga', 
 
    value: 'saga' 
 
    }, { 
 
    label: 'Satire', 
 
    value: 'satire' 
 
    }, { 
 
    label: 'Science fiction', 
 
    value: 'sciencefiction' 
 
    }, { 
 
    label: 'Slice of Life', 
 
    value: 'sliceoflife' 
 
    }, { 
 
    label: 'Speculative', 
 
    value: 'speculative' 
 
    }, { 
 
    label: 'Thriller', 
 
    value: 'thriller' 
 
    }, { 
 
    label: 'Urban', 
 
    value: 'urban' 
 
    }]; 
 

 
});

body { 
 
    padding: 15px; 
 
} 
 
.select2 > .select2-choice.ui-select-match { 
 
    /* Because of the inclusion of Bootstrap */ 
 
    height: 29px; 
 
} 
 
.selectize-control > .selectize-dropdown { 
 
    top: 36px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.12.0/select.js"></script> 
 

 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css"> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.12.0/select.min.css"> 
 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css"> 
 

 
<div ng-app='app' ng-controller='myController'> 
 
    <button ng-click="setAdventure()">setAdventure</button> 
 
    <button ng-click="pushComedy()">pushComedy</button> 
 
    {{ content.categories }} 
 

 
    <ui-select multiple ng-model="content.categories" theme="bootstrap" name="category" on-select="isCategorySelected()" style="width: 300px;"> 
 
    <ui-select-match placeholder="Select Category"> 
 
     {{ $item.label }} 
 
    </ui-select-match> 
 
    <ui-select-choices repeat="category.value as category in categories | filter: {label: $select.search}"> 
 
     <div ng-bind-html="category.label | highlight: $select.search"></div> 
 
    </ui-select-choices> 
 
    </ui-select> 
 
</div>

来源

2015-05-29 13:17:47 DTing

谢谢..！它的工作.. – Sharathreddy

无法更改视图时，范围，UI选angularjs

回答

相关问题